centering two divs

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 with float.
But I can't center two side by side divs.
If I float them and give them auto margins, the auto margins are ignored.

If I wrap the two floated divs in another div, the two divs have no
concept of the other div.

So either I need some way to make the divs side by side without floating
them, or I need some other way to center them.

Any ideas ? I run across this problem all the time and the best I can do
is give the left and right margins artisticly pleasing values, but
centered they ain't.

red

On Thu, 28 Oct 2004 17:20:58 GMT, red <groups2 (AT) reenie (DOT) org> wrote:

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 with float.
But I can't center two side by side divs.
If I float them and give them auto margins, the auto margins are ignored.

If I wrap the two floated divs in another div, the two divs have no
concept of the other div.

So either I need some way to make the divs side by side without floating
them, or I need some other way to center them.

Any ideas ? I run across this problem all the time and the best I can do
is give the left and right margins artisticly pleasing values, but
centered they ain't.

Wrap them in one div which is centered and set to position: relative with
no offset so it will serve as the containing block. Then set both inner
divs to width: 50% (or thereabouts, depending on margins etc.).

Neal wrote:

Wrap them in one div which is centered and set to position: relative
with no offset so it will serve as the containing block. Then set both
inner divs to width: 50% (or thereabouts, depending on margins etc.).
Do I float the 2 divs first before I do this ? Other wise they aren't

side by side.

On Thu, 28 Oct 2004 17:50:41 GMT, red <groups2 (AT) reenie (DOT) org> wrote:

Neal wrote:
Wrap them in one div which is centered and set to position: relative
with no offset so it will serve as the containing block. Then set both
inner divs to width: 50% (or thereabouts, depending on margins etc.).
Do I float the 2 divs first before I do this ? Other wise they aren't
side by side.

You could, or you can use positioning. Remember, when the wrapper div is
set to a non-static position, it's now the containing block, and you can
safely absolute-position the inner divs with respect to it.

On Thu, 28 Oct 2004 17:20:58 GMT, red <groups2 (AT) reenie (DOT) org> wrote:

[snip]

If I wrap the two floated divs in another div, the two divs have no
concept of the other div.

I'm not quite sure what you mean there. Do you mean that they don't
position themselves with respect to one another, resulting in them being
off-centre?

So either I need some way to make the divs side by side without floating
them, or I need some other way to center them.

Any ideas ?

If the DIVs are of equal width, its quite simple with absolute
positioning. Give the left DIV the declaration:

#left {
position: absolute;
right: 50%;
}

and the right DIV:

#right {
left: 50%;
position: absolute;
}

preferably using more meaningful ids.

If they aren't the same width, you will have to wrap them in a DIV and
position that:

/* Obviously, you'll have to replace the
* expressions with actual values.
*/
#container {
left: 50%;
margin-left: -(<n>/2)em;
position: absolute;
width: <n>em;
}

#left {
left: 0;
position: absolute;
}

#right {
position: absolute;
right: 0;
}

I only have a limited number of browsers I can test with, but Opera 7, IE
6 (thankfully[1]), and all Mozilla versions handle this as planned.

Mike


[1] I'm sure I remember reading somewhere that IE doesn't respect right:
and bottom:. Perhaps it's rubbish or problems with earlier versions.
Anyone shed any light here?

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

Michael Winter wrote:

On Thu, 28 Oct 2004 17:20:58 GMT, red <groups2 (AT) reenie (DOT) org> wrote:

[snip]

If I wrap the two floated divs in another div, the two divs have no
concept of the other div.


I'm not quite sure what you mean there. Do you mean that they don't
position themselves with respect to one another, resulting in them
being off-centre?

So either I need some way to make the divs side by side without
floating them, or I need some other way to center them.

Any ideas ?


If the DIVs are of equal width, its quite simple with absolute
positioning. Give the left DIV the declaration:

#left {
position: absolute;
right: 50%;
}

and the right DIV:

#right {
left: 50%;
position: absolute;
}

preferably using more meaningful ids.

If they aren't the same width, you will have to wrap them in a DIV and
position that:

/* Obviously, you'll have to replace the
* expressions with actual values.
*/
#container {
left: 50%;
margin-left: -(<n>/2)em;
position: absolute;
width: <n>em;
}

#left {
left: 0;
position: absolute;
}

#right {
position: absolute;
right: 0;
}

I only have a limited number of browsers I can test with, but Opera 7,
IE 6 (thankfully[1]), and all Mozilla versions handle this as planned.

Mike


[1] I'm sure I remember reading somewhere that IE doesn't respect
right: and bottom:. Perhaps it's rubbish or problems with earlier
versions. Anyone shed any light here?

I tried this and it doesn't treat the #left and #right differently, so

they both end up in the middle over each other.

Maybe I didn't follow the instructions exactly but I can't find any
mistakes. Here's the page I'm working on- it validates both for css and
html. Can you look at it and see what I'm doing wrong?
http:/cardini.tv/newindex.php

The layout is supposed to be #header at the top, and #main under it.
#main is supposed to contain #side and #text next to each other, and
centered. But as you can see, both #side and #text are centered
individually, so you can't see #side at all.

#main{
left:50%;
margin-left:-20em;
position:absolute;
width:40em;
}

#side{
position:absolute;
left:0;
}

#text{
position:absolute;
right:0;
background:#FFFFFF;
}

On Fri, 29 Oct 2004 01:22:26 GMT, red <groups2 (AT) reenie (DOT) org> wrote:

[snip]

I tried this and it doesn't treat the #left and #right differently, so
they both end up in the middle over each other.

That's because I forgot to mention you need to include widths, otherwise
both DIVs will take 100% of the space. Sorry.

[snip]

http:/cardini.tv/newindex.php

When you specify borders, rather than specify each property separately,
just use the shorthand:

border: <width> <style> <colour>;

Also remember to take the border sizes into account when you specify the
container width otherwise you'll get some overlap.

[snip]

Good luck,
Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

red wrote:

Here's the page I'm working on- it validates both for css and
html. Can you look at it and see what I'm doing wrong?
http:/cardini.tv/newindex.php

The layout is supposed to be #header at the top, and #main under it.
#main is supposed to contain #side and #text next to each other, and
centered. But as you can see, both #side and #text are centered
individually, so you can't see #side at all.

#main{
left:50%;
margin-left:-20em;
position:absolute;
width:40em;
}

#side{
position:absolute;
left:0;
}

#text{
position:absolute;
right:0;
background:#FFFFFF;
}

Instead of using Absolute positioning, use Static or Relative positioning.
Declare a width and center #main - in Flow due to Static positioning
used below.
Declare a width and Float #side to the left and #text will flow to the
right.
Apply a left Margin to #text in order to clear the paragraph backgrounds.
This should get you back in the picture and then do some tweaking:

#main{width:90%;margin:auto;}
#side{float:left;width:25%;}
#text{margin-left:25%;background:#ffffff;}

--
Gus

Michael Winter wrote:

On Fri, 29 Oct 2004 01:22:26 GMT, red <groups2 (AT) reenie (DOT) org> wrote:

[snip]

I tried this and it doesn't treat the #left and #right differently,
so they both end up in the middle over each other.


That's because I forgot to mention you need to include widths,
otherwise both DIVs will take 100% of the space. Sorry.

[snip]

http:/cardini.tv/newindex.php


When you specify borders, rather than specify each property separately,
just use the shorthand:

border: <width> <style> <colour>;

Also remember to take the border sizes into account when you specify
the container width otherwise you'll get some overlap.

[snip]

Good luck,
Mike

Now it works great!- thanks- I feel so relieved as this has been dogging

me for awhile.

Gus Richter wrote:

red wrote:

Here's the page I'm working on- it validates both for css and html.
Can you look at it and see what I'm doing wrong?
http:/cardini.tv/newindex.php

The layout is supposed to be #header at the top, and #main under it.
#main is supposed to contain #side and #text next to each other, and
centered. But as you can see, both #side and #text are centered
individually, so you can't see #side at all.

#main{
left:50%;
margin-left:-20em;
position:absolute;
width:40em;
}

#side{
position:absolute;
left:0;
}

#text{
position:absolute;
right:0;
background:#FFFFFF;
}


Instead of using Absolute positioning, use Static or Relative positioning.
Declare a width and center #main - in Flow due to Static positioning
used below.
Declare a width and Float #side to the left and #text will flow to the
right.
Apply a left Margin to #text in order to clear the paragraph backgrounds.
This should get you back in the picture and then do some tweaking:

#main{width:90%;margin:auto;}
#side{float:left;width:25%;}
#text{margin-left:25%;background:#ffffff;}

--
Gus

That works too, and it avoids absolute positioning. But now I'm
wondering why I had such a problem in the first place. I thought the
floated div was ignoring the wrapper. I guess not.
The code below is how I would normally do this, and now it works. I must
have done it wrong somehow. Yours lets the window get smaller before the
#text jumps to the bottom, which is good.
#main{width:90%;margin:auto;}
#side{float:left;width:25%;}
#text{float:left; background:#ffffff; width:65%;}