vertical aligning some <div>'s

Discussion in 'HTML' started by Lanmind, Sep 19, 2008.

  1. Lanmind

    Lanmind Guest

    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?
     
    Lanmind, Sep 19, 2008
    #1
    1. Advertisements

  2. Lanmind

    dorayme Guest

    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?
     
    dorayme, Sep 19, 2008
    #2
    1. Advertisements

  3. Lanmind

    Lanmind Guest

    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
     
    Lanmind, Sep 19, 2008
    #3
  4. Lanmind

    dorayme Guest

    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.
     
    dorayme, Sep 19, 2008
    #4
  5. Lanmind

    Lanmind Guest

    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.
     
    Lanmind, Sep 19, 2008
    #5
  6. Lanmind

    Roy A. Guest

    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?
    Won't work.
     
    Roy A., Sep 19, 2008
    #6
  7. Lanmind

    dorayme Guest

    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, Sep 19, 2008
    #7
  8. Lanmind

    dorayme Guest

    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.
     
    dorayme, Sep 19, 2008
    #8
  9. Lanmind

    Lanmind Guest

     
    Lanmind, Sep 20, 2008
    #9
  10. Lanmind

    Roy A. Guest

     
    Roy A., Sep 20, 2008
    #10
  11. Lanmind

    Lanmind Guest

     
    Lanmind, Sep 20, 2008
    #11
  12. Lanmind

    Roy A. Guest

    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.
     
    Roy A., Sep 20, 2008
    #12
  13. Lanmind

    dorayme Guest

    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!
     
    dorayme, Sep 20, 2008
    #13
  14. Lanmind

    Lanmind Guest

     
    Lanmind, Sep 20, 2008
    #14
  15. Lanmind

    Lanmind Guest

    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, Sep 20, 2008
    #15
  16. Lanmind

    Lanmind Guest

    Oh yes here is it with no map to load: http://www.dockhawk.com/default66.html
     
    Lanmind, Sep 20, 2008
    #16
  17. Lanmind

    dorayme Guest

    ....
    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
     
    dorayme, Sep 21, 2008
    #17
  18. Lanmind

    Lanmind Guest

    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, Sep 21, 2008
    #18
  19. Lanmind

    Lanmind Guest

    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?
     
    Lanmind, Sep 21, 2008
    #19
  20. Lanmind

    rf Guest

    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.
     
    rf, Sep 21, 2008
    #20
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.