How to center a group of DIV's on a page?

roel.schreurs · Oct 10, 2005

Hi All,

I need to build a page with an absolute total width. Three columnar
sections must be in there. These columns themselves must be capable of
containing mark-up themselves.
I have been testing with IE6.0, but I would like to be as generic as
possible, or, rather conforming the HTML 4.01 specification.
Also, the content need to be centered in the browser. I know how to do
this using a table, but I am supposed to use that element.
I have been trying to achieve this using the DIV element, but got only
as far as a scalable page with margins. Note that the differences are
made clear when you modify the width of the browser window. Below some
very simple examples are shown. Could anybody help me there?

TABLE test with absolute widths. This is how it should look like.
<html>
<head>
<title>
TABLE test with absolute widths
</title>
</head>
<body>
<table border="0" align="center">
<tr>
<td width="100px" style="background:red">
LEFT
</td>
<td width="400px" style="background:yellow">
MIDDLE
</td>
<td width="100px" style="background:green">
RIGHT
</td>
</tr>
</table>
</body>
</html>

DIV test with relative widths. This a variant I can get to work, but
not exactly what it should look like.
<html>
<head>
<title>
DIV test with relative widths
</title>
</head>
<body>
<div style="background:blue; margin-left: 20%; margin-right: 20%;">
<div style="background:red; float:left; width=10%">
LEFT
</div>
<div style="background:yellow; float:left; width=40%">
MIDDLE
</div>
<div style="background:green; float:left; width=10%">
RIGHT
</div>
</div>
</body>
</html>

DIV test with absolute widths; not working properly. The content keeps
left aligned.
<html>
<head>
<title>
DIV test with absolute widths; not working properly
</title>
</head>
<body>
<div style="background:blue; margin-left:auto; margin-right:auto;
width=600px">
<div style="background:red; float:left; width=100px">
LEFT
</div>
<div style="background:yellow; float:left; width=400px">
MIDDLE
</div>
<div style="background:green; float:left; width=100px">
RIGHT
</div>
</div>
</body>
</html>

sagejoshua · Oct 10, 2005

DIV test with absolute widths; not working properly. The content keeps
left aligned.

<div style="background:blue; margin-left:auto; margin-right:auto;
width=600px">
<div style="background:red; float:left; width=100px">
LEFT
</div>
<div style="background:yellow; float:left; width=400px">
MIDDLE
</div>
<div style="background:green; float:left; width=100px">
RIGHT
</div>
</div>
</body>
</html>

You've got the right idea with this one. You need a container div.
Problem is that auto margins don't work in all broswers. A great (and
suprisingly interoperable - even works in netscape 4.7) hack is using
negative margins. For example, for your container div of 600px, use
the following css:

#container {
width: 600px;
position: absolute;
left: 50%;
margin-left: -300px;
}

What that does is align the left edge at exactly the middle of the
page, and then move it 300px pixels left (via the negative margin),
and viola! you've got centered content.

Good luck,
-josh

Michael Winter · Oct 10, 2005

On 10/10/2005 14:55, (e-mail address removed) wrote:

[snip]

I have been testing with IE6.0 [...]

That's generally a non-starter right there, especially if you're set on
conforming to HTML 4.01 and using CSS. You would be better off starting
with a conforming user agent like Opera or Firefox. Later, go back to IE
and fix any of its rendering bugs.

[snipped markup]

It's preferable that you post a URL to examples, rather than posting
code. Anyway, if you fix your CSS, your immediate problems go away. You
cannot expect

width=10%

to work. Replace the equals with a colon, just like with all of the
other properties.

Remember not to use in-line styles in your markup, and specify the
background and color properties in pairs. Finally, if your content is
based around text, it's better to use em rather than px units.

Mike

How to have two html audio players on one page?	0	May 3, 2022
Help with Visual Lightbox: Scripts	2	May 3, 2023
How to position the tooltip comment on these buttons?	9	Nov 4, 2023
How to use PDF-lib and how to center each line of texts on the page?	1	Aug 16, 2023
Image shifts to the right when export the page to pdf	4	May 5, 2023
Having trouble centering contents of td ?	3	May 2, 2023
How can I get my menu inside of a menu to function properly?	1	Jan 19, 2023
How can I add arrows to my FAQ	0	Aug 9, 2023

How to center a group of DIV's on a page?

roel.schreurs

sagejoshua

Michael Winter

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads