Stylesheets - centering two floated divs?

Author

centering two floated divs?

yawnmoth

2007-11-16, 10:15 pm

I'd like to center two floated divs but am unsure of how to do so.
Here's my code:

http://www.frostjedi.com/terra/scri...oat-center.html

It seems like setting the width of the outer div to 200px might work
but I don't want to do that because you're not always going to know
the width in advance...

eholz1

2007-11-17, 3:16 am

On Nov 16, 6:33 pm, yawnmoth <terra1...@yahoo.com> wrote:
> I'd like to center two floated divs but am unsure of how to do so.
> Here's my code:
>
> http://www.frostjedi.com/terra/scri...oat-center.html
>
> It seems like setting the width of the outer div to 200px might work
> but I don't want to do that because you're not always going to know
> the width in advance...

Here is one way - not too elegant - perhaps others will have better
suggestions -

<style type="text/css">

body {
width: 800px;
}

#container {
padding-left: 200px; /* LC width */
padding-right: 200px; /* RC width */
margin-right:-55px;
float:left;
position: relative;
border: solid 2px blue;
}

#reddiv {

}
#greendiv {

}

</style>

<body>

<div id="container" style="margin: 0 auto; text-align: center">
<div id="reddiv" style="float: left; background: red; width: 100px;
height: 100px"></div>
<div id="greendiv" style="float: left; background: green; width:
100px; height: 100px"></div>
</div>

</body>

</html>

good luck,

eholz1

Jonathan N. Little

2007-11-17, 3:16 am

yawnmoth wrote:
> I'd like to center two floated divs but am unsure of how to do so.
> Here's my code:
>
> http://www.frostjedi.com/terra/scri...oat-center.html
>
> It seems like setting the width of the outer div to 200px might work
> but I don't want to do that because you're not always going to know
> the width in advance...

text-align: center; centers text not blocks, it's the margin on blocks.
Anyway your floats defeat your "centering" and unless your give the
containing block a width it will expand to the full with and margins
left & right set to auto will not mean anything.

Set a width on the container DIV and set "position: relative" Then set
inside DIVs "position: absolute" which will be relative to container.

<div style="margin: 0 auto; width: 200px; position: relative;">

<div style="position: absolute; left: 0; background: red; width:
100px; height: 100px"></div>

<div style="position: absolute; left: 100px; background: green;
width: 100px; height: 100px"></div>

</div>

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com