Can't Create Nested DIVs
===

I'm having trouble styling some DIVs in my WordPress blog. I would post this in the WordPress forum but I believe it is more of a CSS/HTML problem than an actual WordPress issue. As a precursor I will say that I am styling everything inline right now just to experiment with the coding (I'm going to transfer everything to my external stylesheet once I'm done...I figured people would jump on me for the inline styling if I didn't say anything :) ).

Basically I'm trying to do a nested div OR I'm trying to set a margin between each list item in an unordered list. The list I have generated is basically grabbed info from other posts around the blog to display the most recent posts of a certain category (which is what the PHP is).

It is being display one of the other with no margin in between. It's two divs right next to each other (the one on the left display the articles image and the one on the right display the title of the post and the 'excerpt'). I wanted to nest those two divs into one big div so I can move it around and add margins but whenever I try to add the parent div, it just displays the parent as a div that's only 4px's tall and isn't nesting the other two.

I also tried to style the `<li>` itself but when I add margin's to the entire li, it knocks the two side by side divs out of alignment.

I'm sorry I don't have a JSFiddle done, I wanted to include the entire code (w/ PHP) which I wouldn't have been able to do in JSFiddle.

Thanks for the help!

    <ul style="list-style-type:none;">
    <?php
    global $post;
    $category = get_the_category($post->ID);
    $category = $category[0]->cat_ID;
    $myposts = get_posts(array('numberposts' => 5, 'offset' => 0, 'category__in' => array($category), 'post__not_in' => array($post->ID),'post_status'=>'publish'));
    foreach($myposts as $post) :
    setup_postdata($post);
    ?>
    <li>
    <a href="<?php the_permalink(); ?>">

    <div id="image_con" style="float:left; border:1px solid black; width:200px; height:200px; background-color:black; overflow:hidden;">
    <div id="image_recent" style="margin-left:-50px;">
    <?php set_post_thumbnail_size( 300, 300 );
    the_post_thumbnail(); ?>
    </div>
    </div>

    <div id="cr_content" style="float:right; border:1px solid black; width:356px; height:200px;">
    <?php 
    the_title();
    the_excerpt();
     ?>
    </div>

    </a>
    </li>
    <?php endforeach; ?>
   <?php wp_reset_query(); ?>
   </ul>