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

Problem

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>   <a href="#"><img src="img/mintchip.jpg"></a>

    </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.

Problem courtesy of: TheFlyingProgrammer

Solution

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.

Solution courtesy of: nemo

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.