Question

I’m having trouble with placing divs next to each other rather than having them below. I’m new to using CSS and I’m not sure what I need to do exactly.

The webpage is http://www.panduzee.com/wordpress

The post “Richard Lu” is suppose to be next to “Ashley Lee.”

The link to the code is: http://pastebin.com/J3CNMfaP
And the CSS is: http://pastebin.com/isn5NViA

Sorry, I tried getting the code to work within this post but it wasn’t showing up correctly.

Any help would be appreciated! The CSS was from the wordpress theme, just letting you all know.

Thank you!

Answer 1

jsFiddle( http://jsfiddle.net/BnJ7g/3/ )

on your “boxes” and “boxes2” divs, add the float:left attribute.

<div id="boxes" style="float:left;">
    <div class="box">
        <!--The post title-->
        Ashley Lee    <!--The post image-->
        <a href="http://www.panduzee.com/wordpress/2012/04/15/fashion/"><img width="210" height="312" src="http://www.panduzee.com/wordpress/wp-content/uploads/2012/04/527802_2560693355446_1797426028_1635316_739143794_n-210x312.jpg" class="attachment-homepage-thumb wp-post-image" alt="" title="" /></a>
    </div>    
</div>

<div id="boxes2" style="float:left;">
    <div class="box">
        Richard Lu    <!--The post image-->
        <a href="http://www.panduzee.com/wordpress/2012/04/24/richard-lu/"><img width="210" height="312" src="http://www.panduzee.com/wordpress/wp-content/uploads/2012/04/527802_2560693355446_1797426028_1635316_739143794_n-210x312.jpg" class="attachment-homepage-thumb wp-post-image" alt="" title="" /></a>
    </div>   
</div>

​