CODEWITHSUNDEEP
csshtmlcss-floatcenter
Alejandro L.
Alejandro L.

Reputation: 1076

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

Upvotes: 0

Views: 85

Answers (2)

otinanai
otinanai

Reputation: 4023

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/

Upvotes: 3

wazaminator
wazaminator

Reputation: 245

did you try 

#cuerpo{
margin-left : 10%
margin-right : 10%}

that will center it

or you can put it in a div, make this div full-width and use text-align:center and the div and display:inline on the cuerpo

Upvotes: 1

Related Questions