Wrapper Issue

Get Started
1

I’m a beginner here, and wondering why this doesn’t work.

I would like to create a, browser centered, bordered, wrapper that autoexpands in height around various divs. When using floats to keep the divs in-line, the wrapper just stops after the first div. Be kind, this may or may not be right way to do this but that’s why I’m here.

Here is a simple example.

<head>

<style type=“text/css”>
<!–
#wrapper {
height: 100%;
width: 800px;
border: 1px solid #000;
margin-right: auto;
margin-left: auto;
}
#header {
height: 100px;
width: 800px;
}
#column1 {
width: 300px;
height: 400px;
float: left;
}
#column2 {
height: 400px;
width: 300px;
float: left;
}
#navbox {
float: left;
width: 200px;
height: 400px;
}
–>
</style>

</head>

<body>

<div id=“wrapper”>

<div id=“header”>test header</div>
<div id=“navbox”>test navbox</div>
<div id=“column1”>test column1</div>
<div id=“column2”>test column2</div>

</div><!–Close_wrapper–>
</body>
</html>

2

Welcome to sitepoint.

You need to clear the floats by adding overflow:hidden; to the #wrapper selector in the .css file.

Also it is a bad idea to give height to divs as you have. (this may have just been for testing purposes) but it is good to let the divs expand with the height of the content within them :slight_smile:

3

I knew it had to be something simple.

Thanks Ben, I’ve been struggling with this for days. Who would have thought to ask someone. DOH!

Yes, the heights were just to expand the div boxes for the example.

I’m sure you’ll see me quite often in here.

Thanks for the warm welcome. :smiley:

4

Cool. You will find alot of knowledgeable people here when it comes to .css so feel free to ask all the questions you may have. You are sure to get great assistance. :slight_smile:

5

When you float something it technically doesn’t have any vertical height to expand the height of the wrapper div. From what you’re describing, it sounds like the first div is not floated but the rest are.

Any element you add after the floated divs will act as if the floated divs do not exist unless you clear them. You can add clear:both; (both addresses both left and right floats) to the style of an element you want to appear below/after the divs.

6

Sweet! Didn’t know that would work. It looks like overflow:auto; will also do the trick. Thanks!

7

Just tested it a bit more. Actually, the overflow property doesn’t work in IE 6 and has a few bugs in IE7 :frowning:

Guess I’m stuck with the clearing method for a while longer.

8

See thats the thing, I tried clearing the divs, left, right, both with no avail. The overflow option that Ben mentioned was the only thing that worked. I suppose I have to check it out with IE6,7 and other browsers to see if it is ok.

After that, I need to work on rounded corner borders that encompass both of the 2 column divs on the right that expand as content is added.

9

I usually add cleared breaks or cleared empty divs (0 height) after floated elements in order to force the container to extend around them. Other than that I’m not sure what else you can do.

The overflow method would be so nice if it worked well in IE. I guess that’s why people always suggest the clearing method instead…

10

Just tested it in a bunch of browsers and everything seems a-ok. Thanks again for this info.

11

Cool. What method did you end up using?

12

I added overflow:hidden to my wrapper css information. (well, Dreamweaver added it, I just selected it within the menu.) Still learning here, all this stuff is a lot to remember, but slowly but surely.

It helped me out in another area as well with an internal wrapper.

Got the rounded CSS corners working as well. This is really a chore when you don’t know what you are doing. The site is finally up and functional. I just have to work on the content a bit more. It’s also tough when you are the only one doing everything.

Is there any place to get critique on a website?

13

There is a board for reviews and critiques under Design Your Site > Website Reviews. There’s also one for content reviews.