How to place two divs next to each other -HTML/CSS - html

Question

I've been googling this and have found many answers, but none of them work in my situation because one of the divs is a gallery with multiple images. Basically, I'm trying to put an image and another gallery in the center of a page next to eachother.
HTML snippet:
<div class="sides">
<div class="featured-item">
<p class="featured-label">This weeks Featured Item is Mint Chip Cupcakes!</p> <img src="img/mintchip.jpg">
</div>
<div class="sides">
<div class="flexslider">
<ul class="slides">
<li>
<img src="img/1.jpg" alt="A Happy Birthday Mario Cake">
</li>
<li>
<img src="img/2.jpg" alt="A Pizza Hut Cake">
</li>
<li>
<img src="img/5.jpg" alt="A Makeup Cake">
</li>
<li>
<img src="img/6.jpg" alt="A Makeup Cake">
</li>
<li>
<img src="img/156.jpg" alt="A Makeup Cake">
</li>
</ul>
</div>
</div>
</div>
CSS:
.sides {
display: inline-block;
text-align: center;
max-width: 612px;
}
I also tried using each div seperately and using margin-left, margin-right but no luck. The max-width is 612px because that's the max-width of the gallery. I tried setting it to 1000 and it shows a ton of the images very widely.
Result: http://i.imgur.com/se8DwyL.png
One image is on top of the other, and they are on the left side of the screen.

Answer 1

First, you are using the "slides" class name for what seem like unrelated divs. I'd change that; it's only going to cause you grief. Next, the wrapper should have a set width and be centered with an auto margin -
.my-Wrapper-class {
width:960px;
margin:0px auto;
}
Now float the two divs holding your picture and slide show -
.featured-item {
float:left;
}
.flex-slider {
float:right;
}
You can add a margin to either of those until it's spaced to your liking.