centering two divs

[red]

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

[Neal]

On Thu, 28 Oct 2004 17:20:58 GMT, red <gr*****@reenie.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.).

[red]

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.

[Neal]

On Thu, 28 Oct 2004 17:50:41 GMT, red <gr*****@reenie.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.

[Michael Winter]

On Thu, 28 Oct 2004 17:20:58 GMT, red <gr*****@reenie.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.

[red]

Michael Winter wrote:

On Thu, 28 Oct 2004 17:20:58 GMT, red <gr*****@reenie.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;
}

[Michael Winter]

On Fri, 29 Oct 2004 01:22:26 GMT, red <gr*****@reenie.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.

[Gus Richter]

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

[red]

Michael Winter wrote:

On Fri, 29 Oct 2004 01:22:26 GMT, red <gr*****@reenie.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.

[red]

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%;}

[Gus Richter]

red wrote:

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%;}

You already specified the width of #main to be 90% of which 25% is #side
and the balance is the width of #text.
Giving #text a width of 65%, the centering is off. Give #main
border:1px solid red; and you will see the difference clearly.
If you wish to reduce the width of #text and keep the centering, you
should alter the width of #main.

--
Gus

[red]

Gus Richter wrote:

red wrote:

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%;}

You already specified the width of #main to be 90% of which 25% is #side
and the balance is the width of #text.
Giving #text a width of 65%, the centering is off. Give #main border:1px
solid red; and you will see the difference clearly.
If you wish to reduce the width of #text and keep the centering, you
should alter the width of #main.

I guess you are referring to the fact that 25%+ 65% only = %90. I would
make 25% + 75% but then the divs are not side by side. Neither are they
when I leave off the 65%, because then it is %100.

Your solution where you give the second dive a 25% margin instead of
floating it works fine and I'm happy to use it. Although mine is more
straightforward,and might be tweaked, it seems to be a pain in the ass.

[Gus Richter]

red wrote:

Gus Richter wrote:

red wrote:

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%;}

You already specified the width of #main to be 90% of which 25% is
#side and the balance is the width of #text.
Giving #text a width of 65%, the centering is off. Give #main
border:1px solid red; and you will see the difference clearly.
If you wish to reduce the width of #text and keep the centering, you
should alter the width of #main.

I guess you are referring to the fact that 25%+ 65% only = %90. I would
make 25% + 75% but then the divs are not side by side. Neither are they
when I leave off the 65%, because then it is %100.

Your solution where you give the second dive a 25% margin instead of
floating it works fine and I'm happy to use it. Although mine is more
straightforward,and might be tweaked, it seems to be a pain in the ass.

No, I'm sorry that I did not make myself clear. What I tried to point
out is that #text is actually the width of #main and the *apparent*
width of #text is 65% only because of the floated #side which takes up
the 25%. By you adding width:65%; to #text, you are not declaring
(65%*100%) width, but 65%(65%*100%) width, which essentially, in this
case with this percentage value, acts as though you applied a negative
margin to #text. #main, although still centered as before and retaining
its left margin position, has its *seemingly* right side shortened,
(actually the width of #text is shortened) resulting in the *visual*
loss of centering for #main. [This does take a full understanding of
floats, I'm afraid.]

You probably added the width:65%; to #text thinking that I had
forgotten it and that it should be there. You were mistaken. I did not
include it intentionally.

As I said, add border:1px solid red; to #main and you will see the
difference as you look at it with and without your added width:65%; to
#text.

--
Gus

[red]

Gus Richter wrote:

red wrote:

Gus Richter wrote:

red wrote:

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%;}


You already specified the width of #main to be 90% of which 25% is
#side and the balance is the width of #text.
Giving #text a width of 65%, the centering is off. Give #main
border:1px solid red; and you will see the difference clearly.
If you wish to reduce the width of #text and keep the centering, you
should alter the width of #main.
I guess you are referring to the fact that 25%+ 65% only = %90. I
would make 25% + 75% but then the divs are not side by side. Neither
are they when I leave off the 65%, because then it is %100.

Your solution where you give the second dive a 25% margin instead of
floating it works fine and I'm happy to use it. Although mine is more
straightforward,and might be tweaked, it seems to be a pain in the ass.

No, I'm sorry that I did not make myself clear. What I tried to point
out is that #text is actually the width of #main and the *apparent*
width of #text is 65% only because of the floated #side which takes up
the 25%. By you adding width:65%; to #text, you are not declaring
(65%*100%) width, but 65%(65%*100%) width, which essentially, in this
case with this percentage value, acts as though you applied a negative
margin to #text. #main, although still centered as before and retaining
its left margin position, has its *seemingly* right side shortened,
(actually the width of #text is shortened) resulting in the *visual*
loss of centering for #main. [This does take a full understanding of
floats, I'm afraid.]

You probably added the width:65%; to #text thinking that I had
forgotten it and that it should be there.

No I didn't- I used your code exactly to finish my page- you can see it
here:http:cartdini.tv/newindex.php That was very helpful.

It works good but in my last post I was just trying to figure out why it
was the way it was. I still don't get it. I just don't understand divs.
I write a couple divs, and they never do what I expect them to do. Even
when I think I understand them, then next page I write will act totally
different from my understanding. This has happened over and over again.
I switch my understanding back and forth, and just when I think it
makes sense, I write another page and I'm totally baffled again. I
experiment for hours and hours and read books and webpages over and over
again and it drives my crazy. This had been going on for years and I'm
getting pretty depressed. So thanks for trying but I don't understand
what you've written. I guess all I can do is post examples and ask how
do I do this or that. I don't like it, in fact I hate it, but since I'm
apparently too stupid to actually understand divs I don't see any
alternative. You were mistaken. I did not
include it intentionally.

As I said, add border:1px solid red; to #main and you will see the
difference as you look at it with and without your added width:65%; to
#text.

[Gus Richter]

red wrote:

I used your code exactly to finish my page- you can see it
here:http:cartdini.tv/newindex.php That was very helpful.
http://cardini.tv/newindex.php is the correct one.
It looks very nice, congrats.
It works good but in my last post I was just trying to figure out why it
was the way it was. I still don't get it. I just don't understand divs.
Your question was about floats, which I skipped over. I'll try to help:
A floated item will float to the extreme left (I'll use left, although
it may also be right), out of flow, of whichever is the parent block,
but at the vertical point of its inclusion. If it is not inside a div,
it will flow to the left of the viewport. If it is within a div, it
flows, out of flow, to the extreme left edge of this container div. Out
of flow means that it presents no width/height to its container. A
subsequent (non-floated) element to the floated item, will flow around
the floated item. This is evident when the subsequent element is
paragraph (<p>) text. The subsequent element will attempt to place
itself into the leftover space/width of the parent block less the width
of the floated item. If the subsequent element is a div (or an image,
etc.) with extended height beyond the height of the floated item, this
div will not flow around the floated item, but continue to extend
downward. If the div has a width greater than the available width beside
the floated item, the div will flow to the point where it will fit which
will be below the floated item and to its left edge.
I write a couple divs, and they never do what I expect them to do. Even
when I think I understand them, then next page I write will act totally
different from my understanding. This has happened over and over again.
I switch my understanding back and forth, and just when I think it
makes sense, I write another page and I'm totally baffled again. I
experiment for hours and hours and read books and webpages over and over
again and it drives my crazy. This had been going on for years and I'm
getting pretty depressed. So thanks for trying but I don't understand
what you've written.

Sorry that I have failed. It was my best shot.
Hopefully the stuff I wrote above will make sense.

--
Gus

[red]

Gus Richter wrote:

red wrote:

I used your code exactly to finish my page- you can see it
here:http:cartdini.tv/newindex.php That was very helpful.

http://cardini.tv/newindex.php is the correct one.
It looks very nice, congrats.

Thank you, That's encouraging.

It works good but in my last post I was just trying to figure out why
it was the way it was. I still don't get it. I just don't understand
divs.

Your question was about floats, which I skipped over. I'll try to help:
A floated item will float to the extreme left (I'll use left, although
it may also be right), out of flow, of whichever is the parent block,
but at the vertical point of its inclusion. If it is not inside a div,
it will flow to the left of the viewport. If it is within a div, it
flows, out of flow, to the extreme left edge of this container div. Out
of flow means that it presents no width/height to its container. A
subsequent (non-floated) element to the floated item, will flow around
the floated item. This is evident when the subsequent element is
paragraph (<p>) text. The subsequent element will attempt to place
itself into the leftover space/width of the parent block less the width
of the floated item. If the subsequent element is a div (or an image,
etc.) with extended height beyond the height of the floated item, this
div will not flow around the floated item, but continue to extend
downward. If the div has a width greater than the available width beside
the floated item, the div will flow to the point where it will fit which
will be below the floated item and to its left edge.

That sounds pretty informative but I'm gonna have to read it like ten
times. I recognize the example you posted as the way to do columns. I
used to know that but I didn't realize I was making columns, strictly
speaking. Its more of a data table. I'm trying to do
http://cardini.tv/articles only with data from a database. I'm pretty
sure it can be done with divs.
Thanks everyone for the links and the info, I think I can figure it
out from the info you have posted.

I write a couple divs, and they never do what I expect them to do.
Even when I think I understand them, then next page I write will act
totally different from my understanding. This has happened over and
over again. I switch my understanding back and forth, and just when I
think it makes sense, I write another page and I'm totally baffled
again. I experiment for hours and hours and read books and webpages
over and over again and it drives my crazy. This had been going on for
years and I'm getting pretty depressed. So thanks for trying but I
don't understand what you've written.

Sorry that I have failed. It was my best shot.
Hopefully the stuff I wrote above will make sense.

Its not you, its me. I'm in a fog. I just need to focus on this once and
for all, and you've really been a big help.