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

Centering a collection of floated divs

P: n/a
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">
<h2>Name</h2>
<img src="images/name.gif" alt="Chris" />
<p>Message Here</p>
</div>

I need these divs to sit alongside each other. I also need them to sit
centered in the parent content div.

I have tried floating the divs left, which aligns them horizontally,
but then they cannot be centered.

Effectively I am trying to recreate this table:

<div align="center">
<table border="0">
<tr>
<td>
<table>
<tr><td>NAME</td></tr>
<tr><td>IMAGE</td></tr>
<tr><td>MESSAGE</td></tr>
</table>
</td>
<td>
<table>
<tr><td>NAME</td></tr>
<tr><td>IMAGE</td></tr>
<tr><td>MESSAGE</td></tr>
</table>
</td>
<td>
<table>
<tr><td>NAME</td></tr>
<tr><td>IMAGE</td></tr>
<tr><td>MESSAGE</td></tr>
</table>
</td>
</tr>
</table>
</div>

How can this be done without a table?
Thanks,
Chris.
Jul 20 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
On 9 Nov 2003 03:53:36 -0800, cg*****@csi.com (Chris) wrote:
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">
<h2>Name</h2>
<img src="images/name.gif" alt="Chris" />
<p>Message Here</p>
</div>

I need these divs to sit alongside each other. I also need them to sit
centered in the parent content div.

I have tried floating the divs left, which aligns them horizontally,
but then they cannot be centered.

Effectively I am trying to recreate this table:

<div align="center">
<table border="0">
<tr>
<td>
<table>
<tr><td>NAME</td></tr>
<tr><td>IMAGE</td></tr>
<tr><td>MESSAGE</td></tr>
</table>
</td>
<td>
<table>
<tr><td>NAME</td></tr>
<tr><td>IMAGE</td></tr>
<tr><td>MESSAGE</td></tr>
</table>
</td>
<td>
<table>
<tr><td>NAME</td></tr>
<tr><td>IMAGE</td></tr>
<tr><td>MESSAGE</td></tr>
</table>
</td>
</tr>
</table>
</div>

How can this be done without a table?
Thanks,
Chris.


In order to center a set of div's (float:left;) you need to nest them
inside a fixed width div.
There are two ways that I know of to center the fixed width "parent"
div. BlueRobot.com has a demonstration of each of these at:
margin:auto
http://www.bluerobot.com/web/css/center1.html
and negative margin
http://www.bluerobot.com/web/css/center2.html

There is an article on floating nested divs similar to what you are
after at: http://www.alistapart.com/articles/practicalcss

I have been playing with something similar and you may want to view
the source code on this page:
http://pages.prodigy.net/randyv/centerprb.htm
which I prepared as an example for a question I posted yesterday:
Why does border affect margin in centered fixed width div in NS7.1?
Message-ID: <0i********************************@4ax.com>

Of course, I should include a caution about using fixed sizes of
anything. The purist will tell you it is antithema to "liquid" page
design.

Regards,
Randy
Jul 20 '05 #2

P: n/a
Also see http://www.glish.com/css/ for more css based layouts,
specifically http://www.glish.com/css/3.asp which contains a fixed with
centered layout.

Hope that helps
Jul 20 '05 #3

P: n/a
> In order to center a set of div's (float:left;) you need to nest them
inside a fixed width div.
There are two ways that I know of to center the fixed width "parent"
div. BlueRobot.com has a demonstration of each of these at:
margin:auto
http://www.bluerobot.com/web/css/center1.html
and negative margin
http://www.bluerobot.com/web/css/center2.html

There is an article on floating nested divs similar to what you are
after at: http://www.alistapart.com/articles/practicalcss

I have been playing with something similar and you may want to view
the source code on this page:
http://pages.prodigy.net/randyv/centerprb.htm
which I prepared as an example for a question I posted yesterday:
Why does border affect margin in centered fixed width div in NS7.1?
Message-ID: <0i********************************@4ax.com>

Of course, I should include a caution about using fixed sizes of
anything. The purist will tell you it is antithema to "liquid" page
design.

Regards,
Randy

Very interesting links. I would also like to caution against using
fixed sizes (especially for everything in page). A good alternative is
to use a min size and max size, which is good for accomodating people
with large and small displays.

Jonathan
Jul 20 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.