How do I align images to be horizontal or vertical? - css

Question

I know this has been asked before--but it's such a simple issue--that all the answers are too advanced...lol....
Anyway, I always get stuck on the simplest things. Here is the deal: I have two images on top of each other on the right side, and below that two images side-by-side.
The vertical images located on the right hand side work. However, the #tent and #twins imgs are also vertical and I need them to be horizontal. I have tried the float property but they simply stack vertically with one on the left and one on the right.
Again...this is a simple issue, I know. But I do greatly appreciate the assistance.
This is the code I have thus far:
#aboutUs h2{
font-size:36px;
font-family:Arial, Helvetica, sans-serif;
padding:0 0 0 0;}
#aboutusPara{
position:absolute;
float:left;
width:30%;
line-height:40px;
font-family:Arial, Helvetica, sans-serif;}
#karennorm{
width:50%;
border-radius:100px;
margin-left:50%;
position:relative;}
#wagon{
width:50%;
margin-top:5%;
margin-left:50%;
border-radius:100px;}
figcaption.aboutTop{
margin-top:.5em;
margin-left:50%;
text-align:center;
font-size:12px;
font-style:italic;
width:50%;}
#tent{
width:40%;
border-radius:100px;}
#twins{
width:40%;
border-radius:100px;}
section#aboutBottom{
padding:2em 0 0 0;}
figcaption.aboutBottom1{
text-align:center;
font-size:12px;
font-style:italic;
width:30%;
padding:0 0 2em 0;
margin-left:5%;}
figcaption.aboutBottom2{
margin-left:5%;
text-align:center;
font-size:12px;
font-style:italic;
width:30%;}

Answer 1

Normally the images should stack horizontally by default but maybe within your code you changed something so try this for the 2 images you want to be next to eachother horizontally.
display:inline;
or
display:inline-block;
if you want to keep the box model properties for the images.