Floating div doesn't push other div to it's right

Question

i'm no expert when it comes to css but i'm trying to get a floating div to work. I have two div's, the top one floats left and the other div should wrap right. It seems to sort of do this. The problem is that even though it looks right, it's not actually pushing the box to the right of it. I have a jsfiddle and you'll see what i mean. i set a red border on the div called content. You'll see the content looks about right, but the dotted red line under the h1 start from the begining of the floated object instead of under the H1 title. Please help me understand. here's the jsfiddle: http://jsfiddle.net/wCnY3/

<div id="subNav">box</div><div id="content">WELCOME</div>

Answer 1

Target your #content element with an overflow-x:hidden property.

#content {
    overflow-x:hidden;
}

Like so: http://jsfiddle.net/wCnY3/1/

By design, the overflow:hidden has the effect of forcing your element to behave like a square/rectangle. Since you don't have a set width/height for your element, that just means its wrapping behavior is changed.