SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2005
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hopefully A Quick Question With A Quick Answer

    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

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Zealot
    Join Date
    Jun 2005
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Zealot behati's Avatar
    Join Date
    Feb 2012
    Location
    Copenhagen, Denmark
    Posts
    152
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by didcot84 View Post
    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

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by didcot84 View Post
    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.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •