css - 3-dynamic-width-column layout without tables -


i'm trying achieve following layout without success:

enter image description here

the requirements are:

  1. all 3 columns, red, green , blue, must have dynamic widths, i.e. width must change according content.
  2. the gray container must centered , width must dynamic well, depending on content of 3 columns.
  3. 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

Popular posts from this blog

objective c - Change font of selected text in UITextView -

php - Accessing POST data in Facebook cavas app -

c# - Getting control value when switching a view as part of a multiview -