floating div with fluid width
I found some css hack to make it fluid width for floating div. It’s works but i still don’t understand that hacks.
Also i include my favourite pseudo clear fix hack in here.
Layout
<div class="box">
<div class="left">
some text
</div>
<div class="right">
quite a lot of text, actually, really quite a
bunch of it, you could say this is really
quite a heck of a lot of text
</div>
</div>
CSS Fix
.box {
position: relative;
display: block;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.box:before,
.box:after {
content: "";
display: table;
}
.box:after {
clear: both;
}
.left {
width: 150px;
float: left;
}
.right {
width: auto;
overflow: hidden;
}
How the layout should work. The right side div will inherit the remaining width of box div.
------------- ------------------------------------
| some text | | quite a lot of text, actually, |
------------- | really quite a bunch of it, you |
| could say this is really |
| quite a heck of a lot of text |
------------------------------------
Related Links : http://jsfiddle.net/jackJoe/fxWg7/
Happy CSS Hacks ! :)
ꜜ