I’ve been working this afternoon on creating a 3 three column layout on my site. The pages on the site may have two or three columns, depending on the page content.
I’ve got the css working so that the three columns all work and adjust to each other. However, whenever the left hand subnav menu is on the page, the page content drops beneath the navigation menu and doesn’t stay true to its column.
Would somebody be able to quickly point out what I need to do? I’ve been working on this for hours, this is just the final touch now.
Hi, that’s because you are having your third column unfloated, and when it’s unfloated like that next to those foated elements, when possible, the content will loop under the sidebars.
To keep this behavior from happening, on the page element, you need to set left and right margins, equal respectively, to each sidebars width.
Also, you need to set overflow:hidden; and clear:both; on the main-content element.
Thank you so much for your help with that, I’ve just applied the advice and its worked! Thank you so much.
Just a quick question though, the main content doesn’t adjust if there isn’t the right hand side column, the width of the main column is always limited. Is there anyway I can change that?
One option is to specify the width of the main (content) div to be the width of the content of and the right hand side column, and then place the floated right hand column inside the main content div (you may need to set display: block; on the right hand column depending on how you do it). That way, the content of the main div will be “forced” or pushed into place when the div is there, and just take the entire space if it isn’t.