Question

I always seems to get this simple HTML stuff wrong. I am currently trying to add side by side divs in the middle of a page on this test page I made:

http://www.comehike.com/hiking_dev.php

The code I added was something like this:

<div style="width: 460px; float: left; ">
<strong>Test hello</strong>
</div>
<div style="width: 300px; float: right; ">
<strong>Test hello 2</strong>
</div>

I added <strong> tags so you can spot it on the page better.

But do you see there is text that appears there that reads like this “When considering the injury risk of any” – but that text is in the <p> tag below. Why is it appearing there?

Is it better practice to wrap my 2 divs that I am trying to align, within another div?

Answer 1

After your two floating divs, add another empty div…

<div style="clear:both;"></div>

This will cause the two floating divs to push all subsequent content below them. As you have it now, there is 200 pixels of empty space after the first div allowing the other content to simply wrap around it.

Increasing the width of the floating divs may not be desirable for your layout so clear:both; is most typical for this situation.