Menu
I was wondering if anyone here had a fairly simple tutorial for the following 2 column css layout. A left fixed column and a fluid content column, with a header and footer and equal column heights.
281
A fluid layout is a type of webpage design in which layout of the page resizes as the window size is changed. This is accomplished by defining areas of the page using percentages instead of fixed pixel widths. Most webpage layouts include one, two, or three columns.
To convert it to a fixed-width layout, simply add a fixed with to the #wrapper and set the margins to auto. Setting the margins to auto will cause the left and right margins to be equal no matter how wide the browser window is, which will cause your fixed-width layout to be positioned in the center of the browser.
There is actually an even easier solution to this which i discovered not too long ago. Works well back to IE7. The #fluid div will slide up next to the fixed fix and take up the remaining space while maintaining great fluidity for all responsive sites.
http://jsfiddle.net/uEj55/1/
#fixed{ width:150px; float:left; } #fluid{ overflow:hidden; } Try this Dynamic Drive layout and its relatives (that I was pointed to via a similar question of mine).
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
