HTML paragraph formatting problems - html

Question

So I have this piece of html:
<div id="navigation">
<img class="navLogo" src="images/navlogo.png" />
<h3 class="navTalk">Routes and Maps</h3> <br />
<p class="navtext">Get routes, stop times,and maps</p>
</div>
<div id="fares">
<img class="navLogo" src="#" />
<h3 class="navTalk">Fares & Costs</h3>
<p>Get info on fares and trip costs</p>
</div>
<div id="alerts">
<img class="navLogo" src="#" />
<h3 class="navTalk">Service Alerts</h3>
<p>Find disruptions and delays</p>
</div>
With this CSS:
#navigation {
float: left;
border: 1px solid black;
background-color: #d69f0f;
margin-left: 50px;
padding: 2px;
margin-bottom: 10px;
width: 210px;
}
#fares {
float: left;
border: 1px solid black;
background-color: red;
margin-left: 50px;
padding: 2px;
margin-bottom: 10px;
width: 200px;
}
#alerts {
float: left;
border: 1px solid black;
background-color: red;
margin-left: 50px;
padding: 2px;
width: 200px;
}
#navigation h3 {
color: #fff;
}
#navigation p {
font-size: 8pt;
color: #fff;
padding-left: 4px;
}
#fares p {
font-size: 8pt;
color: #fff;
}
#fares h3 {
color: #fff;
}
#alerts p {
font-size: 8pt;
color: #fff;
}
#alerts h3 {
color: #fff;
}
#tripplanner {
float: left;
}
Everything looks like I expect it to look, except the paragraph doesn't start on the line below the h3 tag. Instead, the paragraph starts after the h3 and wraps to the next line. I also can't seem to get the paragraphs to accept padding, and it's pushing right up against the right side of the icons I'm using. I'm at a complete loss for why this is happening. I'm sure there is an easy solution, but I'm lost. Any help would be greatly appreciated.

Answer 1

Remove the BREAK tag:
<h3 class="navTalk">Routes and Maps</h3> <br /> <--- here.