Collapsing div question

Discussion in 'HTML & Website Design' started by huntz, Mar 25, 2008.

  1. #1
    Hey everyone,

    I have a div that covers the whole page and within this I have three divs that are essentaily three columns that cover the page. In the center div i have my main content which is a blog btw. The two outside columns have a few little pictures to fill the space. What i want to do is keep the center div centered and the other two columns to go underneath the center column when i decrease the size of the browser. Can I do this?

    Hope i'm making sense lol :D

    Anyone know what I'd do to achieve this? Css?
     
    huntz, Mar 25, 2008 IP
  2. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Well OK so you've got a left column, right column and a middle content column. You want the left column and right column to get pushed underneath the middle content column when the page gets resized?
    Well i'm no expert but maybe if you have the wrap (the div that covers the whole page) set at a % width in your CSS, say 95% width, and the other 3 div's a fixed with in px then it will have to push them down. This would push the right column down, i'm not too sure about pushing the left column down also.
     
    wd_2k6, Mar 25, 2008 IP
  3. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #3
    The only thing I can think of for sliding stuff at the sides is floats. If the side columns were left and right floated, with set widths (could be %), they would be pushed inwards as the browser window gets smaller. But they would also cover the middle part-- so I'm thinking that would have to be positioned absolutely, centered in the Old Way (left: 50%, margin-left: -halfthediv'swidth; ) as that would not only give it a high enough z-index to stay atop the floats but would also detach it from the page so other parts don't pay any attention to it.

    This would mean you couldn't have a footer though.

    Maybe softnmore'll come up with something... : )
     
    Stomme poes, Mar 25, 2008 IP
  4. huntz

    huntz Well-Known Member

    Messages:
    694
    Likes Received:
    109
    Best Answers:
    0
    Trophy Points:
    133
    #4
    Got it all working using your code and the z-index attribute. Thanks dude!!!
     
    huntz, Mar 26, 2008 IP