centering two floated divs?

#1

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/scrip...at-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...

#2

On Nov 16, 6:33 pm, yawnmoth <terra1... (AT) yahoo (DOT) com> wrote:

Quote:

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/scrip...at-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

#3

yawnmoth wrote:

Quote:

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/scrip...at-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

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

centering two floated divs?

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)

centering two floated divs? - 11-16-2007 , 08:33 PM

Re: centering two floated divs? - 11-16-2007 , 10:20 PM

Re: centering two floated divs? - 11-16-2007 , 10:55 PM