471,594 Members | 2,301 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,594 software developers and data experts.

centering two floated divs?

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
1 2085
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.

Similar topics

6 posts views Thread by Zaka Ferenc | last post: by
3 posts views Thread by Chris | last post: by
15 posts views Thread by red | last post: by
1 post views Thread by alex | last post: by
2 posts views Thread by Ben C. | last post: by
reply views Thread by leo001 | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.