By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,496 Members | 1,280 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,496 IT Pros & Developers. It's quick & easy.

centering two floated divs?

P: n/a
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...
Nov 17 '07 #1
Share this Question
Share on Google+
1 Reply


P: n/a
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/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
Nov 17 '07 #2

This discussion thread is closed

Replies have been disabled for this discussion.