Hopefully A Quick Question With A Quick Answer

**didcot84** · Feb 18, 2012 09:57

Hi There

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.

Here is an example two column page : - http://tinyurl.com/6rhjngg

and a three column page : - http://tinyurl.com/83k9pbg

Thank you in advance for any help, I greatly appreciate this.

Thankyou

Didcot84

**RyanReese** · Feb 18, 2012 11:03

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.

**didcot84** · Feb 18, 2012 12:00

Hello Ryan

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?

Thank you so much mate, that has really helped.

**behati** · Feb 18, 2012 14:09

Originally Posted by didcot84

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.

Hope that helps

**RyanReese** · Feb 18, 2012 15:48

Originally Posted by didcot84

Hello Ryan

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?

Thank you so much mate, that has really helped.

Well would you be able to know each page if it has 3 or 2 columns?

If so, I'd set a class on the ones with 2 columns, aka <body class="twocols"> and then in teh CSS do something like this (pseudo code)

body.twocols pageelement{removerightmargin:0;}

That will make it flow onto the right sidebars part with pages of 2 columns.

User Tag List

Thread: Hopefully A Quick Question With A Quick Answer

Thread Tools

Display

Hopefully A Quick Question With A Quick Answer

Bookmarks

Bookmarks

Posting Permissions