Question

I have the the following HTML:

<div class="outf">
    <h3 class="left">Text</h3>
    <h3 class="right">more text</h3>
    <p><h3 class="right">some more text/h3></p>
</div>

and in the CSS I have:

.outf {border-color: #3377bb; border-style: double; border-width: 2px; 
   width: 750px; padding: 8px;}

.right {text-align: right; float: right;}

.left {text-align: left; float: left;}

I want the h3 headings to be inside the border but for some reason the border appears first and the text appears below it. Anyone know why this is?
Thanks.

Answer 1

To fix it, set the overflow property on the div:

.outf { overflow:hidden; /* other definitions */ }

---

http://jsfiddle.net/2E5Jw/

---

More on the topic – http://www.quirksmode.org/css/clearing.html