SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot GHicks's Avatar
    Join Date
    Oct 2003
    Location
    Prescott Valley, Arizona, United States
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Clearing all column widths

    I am currently working on a design that includes a 3 column design with 2 rows of columns. The background is ending at the bottom of the longest column from the top row and I want ti to stretch to include the bottom row of divs as well but am not sure how to accomplish that in my css. The footer is properly positioned below all the content as it should, it is just the wrapper that ends at the end of the longest column in my topnav section.

    Basically here is my layout in VERY rough pseudocode:

    wrapper div (opened)
    topnav div (opened)
    topleft div (open and closed float left)
    topmiddle div (open and closed float left)
    topright div (open and closed float right)
    topnav div (closed)
    bottomnav div (opened clear both)
    bottomleft div (open and closed float left)
    (don't have middle right because I don't need those at this time)
    bottomnam div (closed)
    wrapper div (closed)
    footer div (open and closed clear both)

    Hope that is clear enough for someone to point me in a direction to find a solution. Thanks in advance for any suggestions!

    Greg

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,175
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Without seeing the page, we can only guess at the issue. One thing to try is to add overflow: hidden to the #wrapper div. If that doesn't help, provide a link if possible. Issues like this are usually something very simple to fix.

  3. #3
    SitePoint Zealot GHicks's Avatar
    Join Date
    Oct 2003
    Location
    Prescott Valley, Arizona, United States
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That was it! overflow: hidden did the trick. I knew it was something simple, just drawing a blank as to what it was!
    Thanks a bunch!
    Greg

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,175
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Glad to assist. Usually what you described points to floated items hanging outside of their container, and overflow: hidden is the easiest way to fix that ... though sometimes it causes other issues, so there are some other strategies, too.


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
  •