开发者

How to expand CSS column to available space?

开发者 https://www.devze.com 2023-04-11 22:19 出处:网络
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 t

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/

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号