CODEWITHSUNDEEP
htmlcssgoogle-chrome
Marek Sebera
Marek Sebera

Reputation: 40651

CSS3/HTML5 three column layout

Oh, so this is going to be little lame question.
I can't use any CSS framework and I can't use table layout too.
Solution is for Google Chrome only !

How can I set a three column layout like this:

[column1]      [column2]                      [column3]
[width: 250px] [flex width, content centered] [width: 250px]

so both (column1,3) will be static sized and the middle one will have content centered, and it's width will be flexible (window resize)

Afaik I can't use percentage width, I would need something like 

#column2 {width: parent.width - 500px; left: 250px; text-align: center;}

but counting with parent is not possible, I know, this is artefact of my mobile programming skills...

Upvotes: 0

Views: 926

Answers (1)

Erik Funkenbusch
Erik Funkenbusch

Reputation: 93444

If it's only for google chrome, then you can use the flexbox model.

http://dev.w3.org/csswg/css3-flexbox/

Example: http://www.jordanairwave.co.uk/2011/06/21/css3-flex-box-model/

Upvotes: 3

Related Questions