How to expand CSS column to available space?
There is a way to do it using absolute positioning.
I have a two-column layout. The left column is a fixed 200px width plus 30px left margin. The right column contains the content and should expand to fit the available space.
I have done it by positioning each column using absolute positions and stretching the right column using right: 0px to that it will touch the right edge. Is there a way to achieve the same effect when using float:left to define the columns? So far the column is only expanding to fit the width of its contents.
Bonus points if I can do this using Compass/Sass (but I don't want to rely o开发者_运维技巧n frameworks like Blueprint, since the layout is pretty trivial).
@Art; you have to write like this:
HTML:
<div class="left">left fix width</div>
<div class="right">right no fix width</div>
CSS:
.left{float:left;width:200px;margin-right:30px}
.right{overflow:hidden}
check the fiddle http://jsfiddle.net/sandeep/4RN2j/
精彩评论