3 horizontal image layout issue - css

Question

I have been trying to achieve getting 3 images side by side. I finally got it the exact way I want them laid out. A few ways I tried, one image would always move down on smaller screens. They way I have it now is the exact way I want but the code i used is a bit messed up(not even sure if correct but it works).
My code has 4 images and just 3 show up. Again it shows up the way I want. The image that doesn't show up is the 2 one in the code. I dont want the image to show up anyways but I know it shouldnt be in there either.
I struggle with this stuff so any help on how this should read correctly is appreciated.
When I remove the 2 image in the code they all go out of line.
<div id="content">
<center><div><br><br><br><br><br><br>
<img src="images/image1.png" width="30%" style="float:left;/> <img src="images/image2.png" width="50%" style="float:left;"/>
</div>
<img src="images/image3.png" width="30%"/><img src="images/image2" width="30%" style="float:right;"/>
</div>
</center>
<br><br><br><br><br><br><br><br><br></div>
</div>

Answer 1

<div id="content" width="100%">
<div>
<img src="1.jpg" width="30%" style="float:left"/>
<img src="2.jpg" width="30%" style="float:left"/>
<img src="3.jpg" width="30%" style="float:left"/>
</div>
</div>

Answer 2

Here is the simplest and clean code...
fiddle :http://jsfiddle.net/ag3Et/1/
css
#content{
width:100%;
float:left;
}
#content img{
width:32%;
margin-left:1%;
float:left;
}
html
<div id="content">
<img src="http://www.birds.com/wp-content/uploads/home/bird4.jpg"/>
<img src="http://www.hdwallpapers3d.com/wp-content/uploads/2013/05/HD-Birds-wallpaper-3.jpg"/>
<img src="http://www.oassf.com/en/media/images/birds_wallpaper.jpg"/>
</div>

Answer 3

This is the answer for your ques.. please mark it as an answer after using this code so that others can also use it in future...
<div id="content">
<center><div><br><br><br><br><br><br>
<img src="1.jpg" width="30%" style="float:left;"/>
<img src="2.jpg" width="30%"/>
<img src="3.jpg" width="30%" style="float:right;"/>
</div>
</center>
</div>
<br><br><br><br><br><br><br><br><br></div>
</div>

Answer 4

You should definitely brush up on your html and css.
You need to set fixed pixel values so your images can fit into place and stay as you would like them to.
CSS:
#content{ width: 960xpx; margin:30px auto; } //the margin is to center this whole block
img{ width: 320px; float:left;} //each image is defined as a fixed 320px
.clear{ clear: both; } //makes sure things don't overlap
HTML:
<div id="content">
<img src="images/image1.png"/>
<img src="images/image2.png"/>
<img src="images/image3.png"/>
<div class="clear">
<!-- SOME OTHER CONTENT HERE -->
</div>
</div>