vertical aligning some <div>'s

[Lanmind]

Hello everybody,

On my page here: (***Warning contains a Google Map for those of you
with low bandwidth****)

http://www.dockhawk.com/

I am trying to center two div's vertically against another div using
CSS. The two div's are <div id ="side_bar"> & <div id ="directions">.
The other is <div id ="map">.

The two div's are 80% the height of the map div so I'm basically using
margins to push the two divs down 10% of the map. Which would center
the them with 10% below and 10% above.

Now I understand when I set margins it's set as a percentage of the
document size so I converted 10% of map size to a percentage of
document size and came up with 8.1% (the map div is 81% of the
document size).

I'm don't know why but it seems to be double that, like I set it to
16%.

Any Ideas?

 

[dorayme]

On my page here: (***Warning contains a Google Map for those of you
with low bandwidth****)

This is better than springing it on folks here. But why would you do
this considering you could replace it with an image of the same size of
almost zero bandwidth? Don't you trust advice from people with low
bandwidth?

 

[Lanmind]

This is better than springing it on folks here. But why would you do
this considering you could replace it with an image of the same size of
almost zero bandwidth? Don't you trust advice from people with low
bandwidth?

I'm sorry Dorayme,

I didn't even think to just take out the map. Here it is just a black
div:

http://www.dockhawk.com/default55

 

[dorayme]

I'm sorry Dorayme,

I didn't even think to just take out the map. Here it is just a black
div:

http://www.dockhawk.com/default55

Why are you specifying the size of a picture (or the div in this
example) like this?

I am so puzzled as to what you are doing and why you want the exactness
you want.

Frankly, consider using a table, looks like material for a table anyway
and it will all be much easier for you. Even consider valign="middle" or
"top" and be done. Rock solid, old pal!

In the end, unless you study for quite a while, my suggestion will make
a lot more people happy than any other suggestion. It will make tiny
numbers of folk unhappy but these are not likely to be your customers.

 

[Lanmind]

Why are you specifying the size of a picture (or the div in this
example) like this?

I am so puzzled as to what you are doing and why you want the exactness
you want.

Frankly, consider using a table, looks like material for a table anyway
and it will all be much easier for you. Even consider valign="middle" or
"top" and be done. Rock solid, old pal!

In the end, unless you study for quite a while, my suggestion will make
a lot more people happy than any other suggestion. It will make tiny
numbers of folk unhappy but these are not likely to be your customers.

Thanks Dorayme but no thanks, I don't want to use tables, only CSS.
I'll just have to position them with padding until I figure out why
the margin is acting funny.

 

[Roy A.]

[...]

Frankly, consider using a table, looks like material for a table anyway
and it will all be much easier for you. Even consider valign="middle" or
"top" and be done. Rock solid, old pal!

In the end, unless you study for quite a while, my suggestion will make
a lot more people happy than any other suggestion. It will make tiny
numbers of folk unhappy but these are not likely to be your customers.

Thanks Dorayme but no thanks, I don't want to use tables, only CSS.

Why? Accessibility? Believe me, without redesign, the page will be
more accessible with tables, than without.

Witch other part of the specifications don't you want to use?

I'll just have to position them with padding until I figure out why
the margin is acting funny.

Won't work.

 

[dorayme]

Percentages on top and bottom margins are percentages of the containing
width, not of the containing height.

A bit odd but that's just the way it is.

Yes, it looks counter intuitive OK. Perhaps it has the advantage of
providing something definite to go on for an author because the width is
something more tractable in advance than the height.

 

[dorayme]

Yes I think that's the reason. It was either make them percentages of
the width, or just not have them at all, or make them work like
percentage heights-- i.e. only when the containing height is fixed.

I can't really imagine when you'd ever want a top margin that was a
percentage of the width though.

Nor can I. Probably the *most* intuitive is simply to make it what it
seems, simply a percentage of height, whatever it is. And then author
beware if he uses it and does not use a fixed height.

 

[Lanmind]

Nor can I. Probably the *most* intuitive is simply to make it what it
seems, simply a percentage of height, whatever it is. And then author
beware if he uses it and does not use a fixed height.

Wow that really is no good. Top and bottom margin percentages are % of
containing widths and not heights, thats a downer : ( Well I'll see
what I can do then. Thanks for that info I'm glad to finally know
that.

BTW, Does anybody know of a site pointing out the little odd-bits like
that? Make a great bookmark.

 

[Roy A.]

Wow that really is no good. Top and bottom margin percentages are % of
containing widths and not heights, thats a downer : ( Well I'll see
what I can do then. Thanks for that info I'm glad to finally know
that.

BTW, Does anybody know of a site pointing out the little odd-bits like
that? Make a great bookmark.

"The percentage is calculated with respect to the width of the
generated box's containing block. This is true for 'margin-top' and
'margin-bottom', except in the page context, where percentages refer
to page box height."
http://www.w3.org/TR/CSS2/box.html#value-def-margin-width

"The percentage is calculated with respect to the width of the
generated box's containing block. Note that this is true for 'margin-
top' and 'margin-bottom' as well."
http://www.w3.org/TR/CSS21/box.html#value-def-margin-width (work in
progress)

 

[Lanmind]

"The percentage is calculated with respect to the width of the
generated box's containing block. This is true for 'margin-top' and
'margin-bottom', except in the page context, where percentages refer
to page box height."http://www.w3.org/TR/CSS2/box.html#value-def-margin-width

"The percentage is calculated with respect to the width of the
generated box's containing block. Note that this is true for 'margin-
top' and 'margin-bottom' as well."http://www.w3.org/TR/CSS21/box.html#value-def-margin-width(work in
progress)

Oh yes, I've not delved to deep in these W3C pages yet. Thanks Roy : )

 

[Roy A.]

Hello everybody,

On my page here: (***Warning contains a Google Map for those of you
with low bandwidth****)

http://www.dockhawk.com/

I am trying to center two div's vertically against another div using
CSS. The two div's are <div id ="side_bar"> &  <div id ="directions">.
The other is <div id ="map">.

The two div's are 80% the height of the map div so I'm basically using
margins to push the two divs down 10% of the map. Which would center
the them with 10% below and 10% above.

Now I understand when I set margins it's set as a percentage of the
document size

The margin are set as a percentage of the size (width) of the
#map_wrap div.

so I converted  10% of map size to a percentage of
document size and came up with 8.1% (the map div is 81% of the
document size).

I'm don't know why but it seems to be double that, like I set it to
16%.

Any Ideas?

Let the content flow. When you're setting height on an element, e.g.
your #header and your #top_wrap, you're designing for your own
resolution and default font size.

In other browsers with different settings, the content could easily
overflow the element, and make it disappear behind the next element.

When you're using 'position: absolute', the element is taken out of
the normal flow, and won't occupy any space. Which also might lead to
overlapping elements.

To get your element centered you could use "position: relative; top:
10%", but I don't think that is wise. You don't know how much space
the content of the #side_bar and the #directions element is going to
occupy (not in percent anyway).

"The offset is a percentage of the containing block's width (for
'left' or 'right') or height (for 'top' and 'bottom')."
http://www.w3.org/TR/CSS21/visuren.html#propdef-top

If you don't want to use a table, I think you would have to rethink
your design. Maybe using em's instead of percentages.

 

[dorayme]

BTW, Does anybody know of a site pointing out the little odd-bits like
that? Make a great bookmark.

Just hang about here. The regulars are a sort of "Dirty Dozen", each
good at what they do, and a great fractious team, I can't quite make out
who the Telly Savalas character is and I suppose I better not try (he
waaaas one of the meanest SOBs but o so effiecieeeeent!

 

[Lanmind]

Just hang about here. The regulars are a sort of "Dirty Dozen", each
good at what they do, and a great fractious team, I can't quite make out
who the Telly Savalas character is and I suppose I better not try (he
waaaas one of the meanest SOBs but o so effiecieeeeent!

: ) Thanks all. I've done some re-designing of certain elements and
I'm content with it (for now lol).

I did away with the <div> that was making the top horizontal line
using a border, and instead gave the header <div> a bottom border and
made it 0.2% shorter.

Next I put a <div> acting as a spacer above the two <div>'s I was
trying to center. Doing this centered them; the spacer <div> is 10%
and the two centered <div>'s are 80% of the containing element.

Originally the spacer <div> I had set at width: 50% (the map left of
it is also 50%) but in IE it was too wide causing it to push
everything down a line and below the map. I suppose IE cuts a little
off the edges of the browser ?window? width for their scroll bar, I'm
not sure. I made it width: 49% keeping everything inline.

Then those two <div>'s I mentioned were a little off centered
horizontally between the map and window edge. I had each one set at
width: 22% with margin-left: 0 0 0 2%;. so adding it up- map: 50% +
two <div>'s: 22% + two margins: 2% equals 98% leaving another 2% gap
on the right side of the window that didn't look like 2%.

I did this by leaving the two <div>'s at 22% and setting the two
margins to: margin: 0 0 0 1.66%;. This all adds up to 97.32% leaving
another equal 1.66% on the right side.

Let me know what you think! Again thanks all.

 

[Lanmind]

The margin are set as a percentage of the size (width) of the
#map_wrap div.




Let the content flow. When you're setting height on an element, e.g.
your #header and your #top_wrap, you're designing for your own
resolution and default font size.

In other browsers with different settings, the content could easily
overflow the element, and make it disappear behind the next element.

When you're using 'position: absolute', the element is taken out of
the normal flow, and won't occupy any space. Which also might lead to
overlapping elements.

To get your element centered you could use "position: relative; top:
10%", but I don't think that is wise. You don't know how much space
the content of the #side_bar and the #directions element is going to
occupy (not in percent anyway).

"The offset is a percentage of the containing block's width (for
'left' or 'right') or height (for 'top' and 'bottom')."http://www.w3.org/TR/CSS21/visuren.html#propdef-top

If you don't want to use a table, I think you would have to rethink
your design. Maybe using em's instead of percentages.

If you don't want to use a table, I think you would have to rethink
your design. Maybe using em's instead of percentages.

I wouldn't know how. Aren't fonts different percentages of different
display sizes and in turn would cause a less than uniform design
across many user's displays?

Like on my wife's laptop she has a 17" 16:9 high resolution screen and
a simple character like the letter "H" would be a much smaller
percentage of her total screen size than my 15" 4:3 ?1096x764? screen.

If I set a <div> to say 15em on my screen it'd look fine but on her's
I think it would be smaller leading to an undesired layout for the
document. Am I wrong : ) ?

 

[Lanmind]

I wouldn't know how. Aren't fonts different percentages of different
display sizes and in turn would cause a less than uniform design
across many user's displays?

Like on my wife's laptop she has a 17" 16:9 high resolution screen and
a simple character like the letter "H" would be a much smaller
percentage of her total screen size than my 15" 4:3 ?1096x764? screen.

If I set a <div> to say 15em on my screen it'd look fine but on her's
I think it would be smaller leading to an undesired layout for the
document. Am I wrong : ) ?

Oh yes here is it with no map to load: http://www.dockhawk.com/default66.html

 

[dorayme]

....

Oh yes here is it with no map to load: http://www.dockhawk.com/default66.html

No need to have included all the rest to just say this.

This is what can happen with your latest:

<http://dorayme.890m.com/alt/justPics/dockhawk.png>

and

<http://dorayme.890m.com/alt/justPics/dockhawk2.png>

Some other random remarks in case they help you in some way.

height: 3.8%; ?

You should try to be avoiding messing with such precise and finnicky
heights. Consider not using the height instruction at all till you get
more experience. I mean this, it will get you into trouble.

And while on about heights, have you got a really good reason to be
100%ing HTML?

border-Top: none;

Can you please get rid of the capital T in this that I keep seeing every
time I look at your page... The T does not like being there any more
than I like seeing it there.

I can hear letters talk. It uses incredibly foul language to express its
annoyance. Why the hell am I here when I could be hanging about in
something selfless like Mother Teresa or something good lookin' like
Elizabeth Taylor or entertaining and wise like Mark Twain

 

[Lanmind]

No need to have included all the rest to just say this.

This is what can happen with your latest:

<http://dorayme.890m.com/alt/justPics/dockhawk.png>

and

<http://dorayme.890m.com/alt/justPics/dockhawk2.png>

Some other random remarks in case they help you in some way.

height: 3.8%; ?

You should try to be avoiding messing with such precise and finnicky
heights. Consider not using the height instruction at all till you get
more experience. I mean this, it will get you into trouble.

And while on about heights, have you got a really good reason to be
100%ing HTML?

border-Top: none;

Can you please get rid of the capital T in this that I keep seeing every
time I look at your page... The T does not like being there any more
than I like seeing it there.

I can hear letters talk. It uses incredibly foul language to express its
annoyance. Why the hell am I here when I could be hanging about in
something selfless like Mother Teresa or something good lookin' like
Elizabeth Taylor or entertaining and wise like Mark Twain

Wow I don't understand why it would look like those images. I've
previewed my site at 800x600 and it looks fine. Is that how a Mac set
at 800x592 displays it? (?Mac's equivalent of 800x600?)

485x610, really? I don't think anybody would use that. I'm just trying
to fill every possible user display my site might encounter by making
the layout 100% height and width. Is this a bad idea? This idea of a
layout?

 

[Lanmind]

Wow I don't understand why it would look like those images. I've
previewed my site at 800x600 and it looks fine. Is that how a Mac set
at 800x592 displays it? (?Mac's equivalent of 800x600?)

485x610, really? I don't think anybody would use that. I'm just trying
to fill every possible user display my site might encounter by making
the layout 100% height and width. Is this a bad idea? This idea of a
layout?

Gosh I just browsed to some of my fav sites with the display set at
800x600 and side scrolling galore! I suppose most authors aren't
designing for it anymore, I did. Should I?

 

[rf]

<http://dorayme.890m.com/alt/justPics/dockhawk.png>

Wow I don't understand why it would look like those images. I've
previewed my site at 800x600 and it looks fine. Is that how a Mac set
at 800x592 displays it? (?Mac's equivalent of 800x600?)

What dorayme sees is also what I see. It's because of your font sizes.

You have specified font-size 63em; This is, of course, less than two thirds
the size of our favourite font size. The text looks like fly droppings.

So, what to do? Up our *user* font size of course, by several notches. Then
your carefully layed out design falls apart.

Try it for yourself. Just lean on the Ctrl button and spin your mouse wheel
a bit.

BTW if you think the font is too large *on your system* then by all means
reduce your user font size *on your system*. It's bad news if you try to
enforce your preferences on *our systems*. We *will* take offence, we
*wiill* increase our user font size, and break your site.