css - 3-dynamic-width-column layout without tables -
i'm trying achieve following layout without success:
the requirements are:
- all 3 columns, red, green , blue, must have dynamic widths, i.e. width must change according content.
- the gray container must centered , width must dynamic well, depending on content of 3 columns.
- the html code green column must before other 2 columns in source code.
this easy cake using tables, except third requirement, can't manage using divs , css. closest thing i've found "the perfect 3 column liquid layout (percentage widths)", has percentage widths, doesn't suit need.
i found how put the center column first in code
http://jsfiddle.net/gamepreneur/bj6bu/
html
<div class="main"> <div class="right-float"> <div class="green"> green </div> <div class="blue"> blue </div> </div> <div class="red"> red </div> </div>
css
.right-float { float:right } .green { float:left; } .blue { float:right } .red { float:left; }
i'm not sure how rest... plus it's 12:40pm (at time writing this)
Comments
Post a Comment