473,320 Members | 1,572 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 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 2188
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

6
by: Zaka Ferenc | last post by:
Hi all, the page http://info.etr.elte.hu/divtest5.html looks as I expected in IE6 and Opera 7.11, but the floated divs float out of the containing blocks (divs) in NN7.1 and Opera 7.0 (what I...
3
by: Chris | last post by:
Hi, I am pretty new to CSS authoring and find myself in a tricky situation. I have a series of divs (dynamically generated - there could be up to 8) as follows: <div class="person">...
3
by: Philip | last post by:
I am trying to make a bunched of left-floated divs that will be contained in a larger div. the floated divs all contain a left-floated img and text of varying sizes. If I don't set a height (or...
3
by: Lee K. Seitz | last post by:
I'm redesigning this page for more up-to-date browser standards: <http://home.hiwaay.net/~lkseitz/hhs/winners.shtml>. Note the use of an "invisible" table to position the "visible" ones. I'm...
15
by: red | last post by:
How do I center two side by side divs ? I've been writing css pages for a while but there's one thing tha still eludes me. I can center a div with margin auto. I can place two divs side by side...
2
by: tasman.hayes | last post by:
I'm experimenting with converting a site from a table layout to CSS. I'm floating three DIVs in a row for the top of a website (a logo, navigation buttons and a email list signup box). The DIVs...
1
by: alex | last post by:
Hey all, May have missed this in the FAQ, advice or article links welcome. Have a content div with a navigation div floated left and an advertisement div floated right. I would like to have a...
2
by: rudicheow | last post by:
SHORT VERSION ============= I have a bunch of identical fixed-size single-celled tables that rest against each other horizontally thanks to "float:left". These tables are dynamically generated...
2
by: Ben C. | last post by:
Hi If I have a container div and inside the container div I float two divs (one left and one right), the containting div will collapse as the floated divs will no longer prop it up, meaning that...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

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.