Wrappers Size Reflecting Its Contents

Take a look at this Fiddle. I'm puzzled as to why #wrapper doesn't expand to accommodate the divs inside it. What's missing here? As a side note, any idea as to why my

---

i

Solution 1:

The wrapper doesn't expand because the items inside are floating and taken out of the natural flow of the document.

You can tell the wrapper to expand past the floating elements by adding a block level element to the end of the wrapper and telling it to clear all floats:

#wrapper:after{
  content:".";
  display:block;
  clear:both;
  visibility:hidden;
}

Also, you had the height of the wrapper set to 100px.

Here's an updated version of your fiddle: http://jsfiddle.net/kWJ79/9/

As for your hr, what exactly are you wanting to do? It looks like you're wanting to create a vertical bar between the 2 divs. Is this correct?

UPDATE

If you're wanting to create a line between the left and right divs I'd consider a slightly different route.

What I'd do is put the left div inside its own container which has a right padding, margin and border. This way you don't have a redundant div floating around in your code and recudes the need to use a hr.

Here's an updated fiddle with this example: http://jsfiddle.net/kWJ79/15/

#left_wrapper{
    margin-right:5px;
    padding-right: 5px;
    border-right:1px solid red;
    float:left;
}

Notice that I've removed the float:left; from the #left div and placed it on the #left_wrapper instead.

Solution 2:

You have specified the height value.