Search code examples
csshtmlcss-floatcenter

Center a div which containts floating divs

I have this code:

<div id="cuerpo">
<?php foreach ($sistemas as $cada) { ?>
    <div id="show">
        <a href="<?php echo "index.php?zona=acceso&id=" . $cada['id']; ?>" target="_self"><?php echo $cada['nombre']; ?></a>
        <p><?php echo $cada['descripcion']; ?></p>
    </div>
<?php } ?>
</div>

So I have a div with id "cuerpo" that will simulate a box that contain all $sistemas in each div called "show".

Then, I have this css:

#cuerpo
{
width: 800px;
margin: 0 auto;
margin-top: 25px;
padding-bottom: 5px;
border: solid 2px black;
}
#show
{
width: 200px;
margin-top: 10px;
margin-left: 5px;
border: solid 1px black;
padding: 5px;
}

And if I use float: left; everything inside my webpage will be unconfigured and very awful.

I want something like this:

enter image description here

PS: Everything in my scheme it's working but not the floating thing.

Thanks for your help!

EDIT1:

I post an image with my actual problem according to the accepted answer.

enter image description here

Solution

  • Just use display:inline-block for your #show container. See the example here: http://jsfiddle.net/GLp3Y/

    _________________*EDIT*________________

    If you need to use float you must set the parent container to overflow:hidden. See the demo here: http://jsfiddle.net/GLp3Y/4/