My wrapper wont expand!

Get Started
1

Hiya,
I’m a real Dreamweaver/Css novice so please bear with me.

I’m trying to build a site that has one div as a wrapper to hold all the content. This div is centred in the browser window ( and I HAVE worked out how to do that! :slight_smile: ) I then want to include content within this box, and this material is itself held inside various divs within the main content wrapper. However, the amount of material held within the wrapper is different on each page, so I need its height to be flexible. And this is where I’m stuck.

If I create a div that extends below the bottom of the wrapper, it just sticks out the bottom, as if it is sitting on top of the wrapper, rather than being contained within it.

I’ve tried setting the height of the div to “auto”, “inherit” and I’ve tried omitting the “height” perameter altogether, but these just make the wrapper div disappear into a small line at the top of the screen. I also tried removing the height and using “overflow:hidden” as per a previous post on here, but this made everything vanish into a thin line at the top of the page.

I know this can be done, because I see many sites with pages of varied lengths held within a content wrapper. So please could someone tell me how it’s done? Or if I’ve made a stupid mistake in my code, please show me!

I’m using Dreamweaver 8. Code is as follows:

<body>
<div id=“wrap”>
<div id=“blue”></div>
<div id=“purple”></div>
<div id=“pink”></div>
</div>

/* CSS Document */

#wrap
{
background-color:#00CC00;
position:relative;
width:700px;
height:500px;
margin:auto;

}

#blue {
background:#3333CC;
position:absolute;
width:200px;
height:200px;
top:100px;
left:100px;
}

#purple {
background-color:#9900FF;
position:absolute;
width:200px;
height:200px;
top:100px;
left:400px;

}
#pink {
background-color:#FF00CC;
position:absolute;
width:200px;
height:200px;
top:369px;
left:400px;

}

</body>

(Yes this is a very odd design! I’m using this to practice the technique, before using it in the real site. In this example, I’d like the blue purple and pink boxes to be fully contained within the green wrapper.)

I hope that all makes sense. Please ask anything else you need to know.

Thanks
13adger

2

I have found that giving different <div>'s a different color background is a great way to see where layout problems are located. Then, I just have to remember to remove the different colors when I make the site live. :slight_smile:

3

Thanks so much. (Sorry, I thought I’d already posted a reply to this, but it seems I didn’t!) That was a great guide, all making sense, and explaining all the pros & cons. Just like the Sitepoint books in fact!

4

Ok, I’m getting there! I now have the blue box floating left, the pink box floating right, and the purple box in the middle. I can see how using margins is going to let me fine tune their positioning. But I’m now trying to float the purple box underneath the blue box, and haven’t worked out how. I’m sure it involves a “clear” somewhere, but I can’t find it in any of my books. (I’ve tried removing the “float” from the purple box altogether, and all the other float options, but no luck.)

The CSS now looks like this:

#wrap
{
background-color:#00CC00;
position:relative;
width:700px;
height:500px;
margin:auto;

}

#blue {
background:#3333CC;
width:200px;
height:200px;
float:left;
margin:10px;
}

#purple {
background-color:#9900FF;
width:200px;
height:200px;
float:left;
margin:10px;

}
#pink {
background-color:#FF00CC;
width:200px;
height:200px;
float:right;
margin:10px;
}

I would love to include a picture to show you what I mean, but can’t work out how to do that! And I’m sure this is all so simple to you that you will visualise it from my code anyway!

Thanks again for your patience!

PS Do you know any good sites which explain floating clearly and simply? I know this site is not supposed to be a tutorial, so I may be pushing my luck asking these really basic questions.

5

Thanks again. It all makes sense.

I’m sure I’ll be back soon!

6

In general, it’s best to avoid position: absolute for page layout—especially major page elements.

Giving an element position: absolute effectively makes it invisible to the other page elements, so the wrapper has no idea those boxes are there, so does not know to wrap around them, even with overflow: hidden. All you can do in this case is set a greater height on the wrapper to make it appear to wrap around the other boxes. E.g.

#wrap {
    height:700px;
}

A much better approach is to remove position: absolute and the top/left coordinates from all those boxes and float them instead. Float the left ones left and the right ones right, and add in margins where necessary to adjust their position. Then put overflow: hidden on the wrapper and it will wrap around them nicely.

Edit:
PS - Welcome to the forums! :slight_smile: (I didn’t notice it was your first post!)

7

A site as Sitepoint is there to help isn’t it :slight_smile: About your question if there are any good tutorials around explaining floating and clearing in detail. There are many references some of them here on Sitepoint. Here is one

Floating & Clearing

8

If what you are doing is stacking boxes in a column, I would put a left float around the boxes.

What i generally do is something like this:
<div class=“left”>
<div class=“blue”>
</div> <!-- this closes the blue div –>
<div class=“purple”>
</div> <!-- this closes the purple div –>
</div> <!-- this closes the left div –>
<div class=“middle”>
</div>

I would use a class for something as generic as a float. That will let you use it over and over in your code. You could actually use a left float inside the middle div to split the middle div into two parts.

Hope this helps.

9

Thank you so much. Especially since you didn’t just tell me what to do, but why what I was doing wasn’t working!

I’m going away now to learn about floating - which may result in more posts with more questions of course!

And thanks for your comment Bill. It works for me!