#1
  1. No Profile Picture
    Diagonal Man
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2001
    Location
    On your monitor
    Posts
    210
    Rep Power
    14

    CSS Layout - filling a container div with divs


    Hi all,

    I'm excruciatingly close to completing a three column CSS layout, in fact I have. But I have a problem..

    I have one container div, containing 3 other divs, all floated left so they stack up next to each other, this works great (the container div is a fixed width). However, I want to have a solid background colour in the container div but this won't work. The container div is effectively 'empty' as it only contains the three other divs. The 3 divs flow out of this container div, overflow:visible won't have any effect because it only relates to actual content within a div, not other divs.

    If I put line breaks or other inline content in the container div, it stretches down accordingly, but as I want the container div to automatically "envelope" the three inside divs automatically, I'm at a loss.

    Can anyone help here? relative and absolute positioning the divs within the container doesn't work either.
  2. #2
  3. No Profile Picture
    :: cerebralshock ::
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2002
    Location
    Everywhere & nowhere.
    Posts
    133
    Rep Power
    13
    <div id="container" style="background-color: bgcolor;">
    <div id="1">blah1</div>
    <div id="2">blah2</div>
    <div id="3">blah3</div>
    </div>
  4. #3
  5. No Profile Picture
    Diagonal Man
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2001
    Location
    On your monitor
    Posts
    210
    Rep Power
    14
    That won't work, if you try it. The divs 'drop out' the bottom of the container.

    The solution, it seems, is height: auto, followed by a box model hack that specifies min-height: <value> for CSS2 compliant browsers.

    .centercontent {
    height: 520px;

    }

    html>body .centercontent {

    height: auto;
    min-height: 520px;
    }
  6. #4
  7. mod_dev_shed
    Devshed Supreme Being (6500+ posts)

    Join Date
    Sep 2002
    Location
    Atlanta, GA
    Posts
    14,817
    Rep Power
    1100
    If you float all the <div>s you'll get the desired effect.
    Code:
    <div style="float:left:background-color:red">
      <div style="clear:left;float:left;">X</div>
      <div style="clear:left;float:left;">Y</div>
      <div style="clear:left;float:left;">Z</div>
    </div>
    # Jeremy

    Explain your problem instead of asking how to do what you decided was the solution.
  8. #5
  9. No Profile Picture
    Diagonal Man
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2001
    Location
    On your monitor
    Posts
    210
    Rep Power
    14
    I just tried that, and the divs sit on top of one another, not next to each other...
  10. #6
  11. mod_dev_shed
    Devshed Supreme Being (6500+ posts)

    Join Date
    Sep 2002
    Location
    Atlanta, GA
    Posts
    14,817
    Rep Power
    1100
    Sorry, I didn't read your entire post so I missed that part. Just don't clear the last two. The key is that the container must also float.
    Code:
    <div style="float:left:background-color:red">
      <div style="clear:left;float:left;">X</div>
      <div style="float:left;">Y</div>
      <div style="float:left;">Z</div>
    </div>
    # Jeremy

    Explain your problem instead of asking how to do what you decided was the solution.
  12. #7
  13. No Profile Picture
    Diagonal Man
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2001
    Location
    On your monitor
    Posts
    210
    Rep Power
    14
    Ah! Excellent!

    Many thanks!
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2014
    Posts
    1
    Rep Power
    0
    Hope this will help you....Div inside Div

    Dell

IMN logo majestic logo threadwatch logo seochat tools logo