Why does <h1> have a line-break? - html

Question

I'm building a template for headlines that later on will have varying length. Before the headline is an icon. Why does the headline break, according to the icon width?
js fiddle
HTML
<img src="http://www.ecotricity.ch/pix/slideBanner/carLogo.gif" width="50"/>
<div>
<img src="http://png-1.findicons.com/files/icons/1241/twitter_land/256/school_of_fish.png" width="50"/>
<h3> The cars are faster than fish</h3>
</div>
CSS
div{
float: left;
margin-left: 30px;
}
img{
float: left;
}

Answer 1

It's because you're not clearing the float after the img element within the div.
You have two options. You can either use CSS to remove the float from that img element:
div img {
float: none;
}
JSFiddle demo 1.
Or add a clearing element within your div:
<img src="..." width="50"/>
<br style="clear:both"/>
<h3> The cars are faster than fish</h3>
JSFiddle demo 2.
If you want the h3 element to be alongside the img element, you can alter option 1 above to:
div img,
div h3 {
display: inline-block;
float: none;
}
JSFiddle demo 3.

Answer 2

Replace your div style with:
div{
float: left;
margin-left: 30px;
width:300px;
}
//increase the width of div

Answer 3

If your question is "Why does H1 have a line break" the answer is because it is a block level element; however, if you are asking how to accomplish something like having all the elements in a vertical line, you can do this: http://jsfiddle.net/rM6G9/7/
div{
float: left;
clear:both;
}
img{
float: left;
display: block;
}
h3{
float:left;
clear:both;
}
If you want the second image and the headline to be inline do this:
div{
float: left;
clear:both;
}
img{
float: left;
display: block;
}
h3{
float:left;
}