Home | Contact Us | FAQ | Search & Site Map | Link to Us
Sign In | Join | Other 45 Sites in Network
Home
Discussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers

Webmaster Forum / HTML, CSS, Scripts / CSS / October 2004


Tip: Looking for answers? Try searching our database.

centering two divs

Thread view: 
Enable EMail Alerts  Start New Thread
Thread rating: 
red - 28 Oct 2004 18:20 GMT
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
Reply to this Message
Neal - 28 Oct 2004 18:33 GMT
> How do I center two side by side divs ?
>
[quoted text clipped - 14 lines]
> 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.).
Reply to this Message
red - 28 Oct 2004 18:50 GMT
> 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.
Reply to this Message
Neal - 28 Oct 2004 18:58 GMT
>> 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.
Reply to this Message
Michael Winter - 28 Oct 2004 19:59 GMT
[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?

Signature

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

Reply to this Message
red - 29 Oct 2004 02:22 GMT
> [snip]
>
[quoted text clipped - 58 lines]
> 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;
   }
Reply to this Message
Michael Winter - 29 Oct 2004 10:25 GMT
[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

Signature

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

Reply to this Message
red - 29 Oct 2004 13:14 GMT
> [snip]
>
[quoted text clipped - 20 lines]
> Good luck,
> Mike

Now it works great!- thanks- I feel so relieved as this has been dogging
me for awhile.
Reply to this Message
Gus Richter - 29 Oct 2004 13:03 GMT
> 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?
[quoted text clipped - 22 lines]
>    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
Reply to this Message
red - 29 Oct 2004 20:36 GMT
>> 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?
[quoted text clipped - 34 lines]
> #side{float:left;width:25%;}
> #text{margin-left:25%;background:#ffffff;}

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%;}
Reply to this Message
Gus Richter - 29 Oct 2004 23:20 GMT
> 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
[quoted text clipped - 5 lines]
> #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.

Signature

Gus

Reply to this Message
red - 30 Oct 2004 04:19 GMT
>> 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
[quoted text clipped - 12 lines]
> 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 a.s.
Reply to this Message
Gus Richter - 30 Oct 2004 06:34 GMT
>>> 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
[quoted text clipped - 20 lines]
> 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 a.s.

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.

Signature

Gus

Reply to this Message
red - 30 Oct 2004 07:16 GMT
>>>> 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
[quoted text clipped - 35 lines]
> 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.
Reply to this Message
Gus Richter - 30 Oct 2004 09:50 GMT
> 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
[quoted text clipped - 5 lines]
> 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.

Signature

Gus

Reply to this Message
red - 30 Oct 2004 16:00 GMT
>> 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
[quoted text clipped - 17 lines]
> 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
[quoted text clipped - 8 lines]
> 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.
Reply to this Message
 
Sign In
Join
My Latest Posts
My Monitored Threads
My Blog
My Photo Gallery
My Profile
My Homepage
Start New Thread
Enable EMail Alerts
Rate this Thread



©2009 Advenet LLC   Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.