I am creating a photograph page for my wordpress blog.
My aim is to align two picture per row.
I can't figure out how to align a landscape orientation with a portrait orientation, or two portrait orientations as in the last two pictures on my page.
Another question is how can I make pictures auto-size so that the pictures will not shift when the browser windows shrinks?
http://jbkphotographs.com/?page_id=12
CSS for this page is
.photograph-page{
margin: 0 5%;
}
.photo {
float: left;
}
HTML code is
<div class="photograph-page">
<div class="photo">
<a href="http://jbkphotographs.com/wp-content/uploads/2012/11/catching-the-sun1.jpg"><img src="http://jbkphotographs.com/wp-content/uploads/2012/11/catching-the-sun.jpg" alt="" title="catching-the-sun" width="500" height="332" /></a>
</div>
<div class="photo">
<a href="http://jbkphotographs.com/wp-content/uploads/2012/11/last_trip.jpg"><img src="http://jbkphotographs.com/wp-content/uploads/2012/11/last_trip_icon.jpg" alt="" title="last_trip_icon" width="500" height="333" /></a>
</div>
<div class="photo">
<a href="http://jbkphotographs.com/wp-content/uploads/2012/11/sunrise.jpg"><img src="http://jbkphotographs.com/wp-content/uploads/2012/11/sunrise_icon.jpg" alt="" title="sunrise_icon" width="500" height="332" /></a>
</div>
<div class="photo">
<a href="http://jbkphotographs.com/wp-content/uploads/2012/11/on-the-bus.jpg"><img src="http://jbkphotographs.com/wp-content/uploads/2012/11/on-the-bus_icon.jpg" alt="" title="on-the-bus_icon" width="500" height="332" /></a>
</div>
<div class="photo"><a href="http://jbkphotographs.com/wp-content/uploads/2012/10/Deuce7_500px.jpg"><img title="Deuce7_500px" src="http://jbkphotographs.com/wp-content/uploads/2012/10/Deuce7_500px.jpg" alt="" width="500" height="325" /></a><a href="http://jbkphotographs.com/wp-content/uploads/2012/10/Evening-Sky_1_Icon.jpg">
<div class="photo">
<a href="http://jbkphotographs.com/wp-content/uploads/2012/11/tree.jpg"><img src="http://jbkphotographs.com/wp-content/uploads/2012/11/tree_icon.jpg" alt="" title="tree_icon" width="332" height="500" /></a><div class="photograph-page">
</div>
<img class="alignnone size-full wp-image-168" title="Evening-Sky_1_Icon" src="http://jbkphotographs.com/wp-content/uploads/2012/10/Evening-Sky_1_Icon.jpg" alt="" width="332" height="500" /></a></div>
</div>
Thank you