Need help solving overflow:hidden problem

Discussion in 'CSS' started by devnl, Oct 12, 2010.

  1. #1
    Hi,

    I've been working on implementing a design a made for a website which up until now has gone pretty smooth. However, I'm currently running into the following problem. I have a container DIV which contains 2 DIVs, one is floated left, one is floated right. The problem that arises is that the container DIV does not grow in height with the content of the two floated DIVs. Usually I'd go about solving this using overflow:hidden on the container DIV. However, this time around that is not the solution. A lot of the content on the page just disappears (which is basically what overflow:hidden was meant to do).

    Does anyone have any idea how to stretch the container DIV to the correct height without losing a part of the content? I'm fairly sure that the solution that I have in place should be doing the trick, but I get the idea I'm missing something here. You can take a look at the demo on:

    http://development.fujimtbmasters.com/wp/

    Thanks in advance!

    PS.

    Both CSS and HTML validate W3C wise.
     
    devnl, Oct 12, 2010 IP
  2. GWiz

    GWiz Peon

    Messages:
    359
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    0
    #2
    You can try adding a clear:both; after the 2 div's, but within the container. So it would look like this:

    <container>
    <div1></div1>
    <div2></div2>
    <div style="clear:both;">
    </container>
     
    GWiz, Oct 12, 2010 IP
  3. devnl

    devnl Guest

    Messages:
    31
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I tried that, but to no avail :(
     
    devnl, Oct 12, 2010 IP
  4. GWiz

    GWiz Peon

    Messages:
    359
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Remove all the overflow:hidden; from your elements.
     
    GWiz, Oct 13, 2010 IP
  5. devnl

    devnl Guest

    Messages:
    31
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I've done that on the elements that don't explicitly need it. As you can see the content DIVs actual size still doesn't reach all the way to the bottom of it's containing items. Inside of both floating DIVs are some elements that need the overflow:hidden to work correctly (e.g. the jQuery sliding lists). I did not remove it from them, because that would screw up the layout even more.

    http://development.fujimtbmasters.com/wp/
     
    devnl, Oct 13, 2010 IP
  6. GWiz

    GWiz Peon

    Messages:
    359
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    0
    #6
    I don't quite understand what you mean by this and what you are trying to achieve. From my perspective, everything looks fine. Please re-iterate what exactly you are trying to do.
     
    GWiz, Oct 13, 2010 IP
  7. devnl

    devnl Guest

    Messages:
    31
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    If you look at it now, you can see that I've given the #content DIV a margin-bottom of 20px. I added this because I want to create room for a footer that will go there. However, the margin-bottom is nowhere to be seen in the page design. My guess (and tools such as the IE Development Toolbar, that visually highlight where elements are on the page, confirm this) is that the #content DIV does not grow in height depending on its content. Therefore the margin-bottom might be there, but since the #content element stops halfway on the page, it is not showing up correctly.

    If it's still unclear, please tell me and I'll see if I can whip up some screenshots.
     
    devnl, Oct 13, 2010 IP
  8. GWiz

    GWiz Peon

    Messages:
    359
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Remove any height:100px; you have applied to the div's within the #content DIV. That is causing your problem.
     
    GWiz, Oct 14, 2010 IP
  9. devnl

    devnl Guest

    Messages:
    31
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    You are officially my hero. I have absolutely no idea why those declarations were there though. Guess it was done in some sort of sleep deprived state. Thanks!
     
    devnl, Oct 14, 2010 IP
  10. scriptinstaller

    scriptinstaller Peon

    Messages:
    109
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #10
    I know your problem, Most likely you need another container div
     
    scriptinstaller, Oct 24, 2010 IP
  11. GWiz

    GWiz Peon

    Messages:
    359
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    0
    #11
    You're a little late, it was already solved.
     
    GWiz, Oct 24, 2010 IP