3 column layout HTMLCSS | html 3 columns
Thisislessfor@easweeandmoreforothersthatmighthavethesamequestion:IfyoudonotrequiresupportforIE<10,youcanuseFlexbox[1].ItsanexcitingCSS3propertythatunfortunatelywasimplementedinseveraldifferentversions,;addinvendorprefixes,andgettinggoodcross-browsersupportsuddenlyrequiresquiteafewmorepropertiesthanitshould.Withthecurrent,finalstandard,youwouldbedonewith.container{display:flex;}.containerdiv{flex:1;}.column_center{order:2;}Thatsit.IfyouwanttosupportolderimplementationslikeiOS6,Safari<6,...
This is less for @easwee and more for others that might have the same question:
If you do not require support for IE < 10, you can use Flexbox[1]. Its an exciting CSS3 property that unfortunately was implemented in several different versions,; add in vendor prefixes, and getting good cross-browser support suddenly requires quite a few more properties than it should.
With the current, final standard, you would be done with
.container { display: flex; } .container div { flex: 1; } .column_center { order: 2; }Thats it. If you want to support older implementations like iOS 6, Safari < 6, Firefox 19 or IE10, this blossoms into
.container { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12...