Adding side by side divs confusion

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开发者_JS百科 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?

---

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.

---

Surround those two divs in a parent div with overflow set to hidden.

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

An alternative (as others have pointed out) is to use a third element:

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

It's debatable as to which is better. Usually, either is just fine. Here's a post about the topic: Floated Child Elements: overflow:hidden or clear:both?

---

You'll either need to add a div below your two divs with clear:both; as others have suggested, or you could add clear:both; to the following <p> element.

---

Because you have an entire page width of 960px. You're combined div widths are 760px (400+300). If you add 200px to the second div you should be fine.

Edit: Because of padding, you can increase either of the divs by 150px and be fine.