CSS2 - Centering block boxes

Discussion in 'HTML' started by Chris Beall, Jul 18, 2003.

  1. Chris Beall

    Chris Beall Guest

    Example at http://pages.prodigy.net/chris_beall/Demo/testcase.html.
    Note that the images are against the left margin of the outer <div>. My
    objective is to CENTER the two images and their titles on the screen
    (assuming there is enough width for both of them; if not, then center
    each image and its title, stacking the two images vertically.)

    How can this be done?

    Chris Beall
    Chris Beall, Jul 18, 2003
    #1
    1. Advertising

  2. Chris Beall

    brucie Guest

    In post <HAVRa.1976$>
    Chris Beall said...

    > Example at http://pages.prodigy.net/chris_beall/Demo/testcase.html.
    > Note that the images are against the left margin of the outer <div>. My
    > objective is to CENTER the two images and their titles on the screen
    > (assuming there is enough width for both of them; if not, then center
    > each image and its title, stacking the two images vertically.)


    <style type="text/css">
    #container1,#container2{width:49%;min-width:130px;text-align:center;float:left;}
    #container2{float:right;}
    #one,#two{width:128px;}
    #one{float:right;}
    #two{float:left;}
    </style>

    <div id="container1">
    <div id="one"><img src="ny.jpg" width="128" height="104" alt=""><br>one</div>
    </div>

    <div id="container2">
    <div id="two"><img src="ny.jpg" width="128" height="104" alt=""><br>two</div>
    </div>

    --
    brucie a. blackford. 19/July/2003 08:03:17 am kilo.
    http://loser.brucies.com/
    brucie, Jul 18, 2003
    #2
    1. Advertising

  3. Chris Beall

    Chris Beall Guest

    Re: CSS2 - Centering block boxes - Part 2

    "brucie" <> wrote in message
    news:1fo27xljhoe8y$...
    > In post <HAVRa.1976$>
    > Chris Beall said...
    >
    > > Example at http://pages.prodigy.net/chris_beall/Demo/testcase.html.
    > > Note that the images are against the left margin of the outer <div>.

    My
    > > objective is to CENTER the two images and their titles on the screen
    > > (assuming there is enough width for both of them; if not, then

    center
    > > each image and its title, stacking the two images vertically.)

    >
    > <style type="text/css">
    >

    #container1,#container2{width:49%;min-width:130px;text-align:center;floa
    t:left;}
    > #container2{float:right;}
    > #one,#two{width:128px;}
    > #one{float:right;}
    > #two{float:left;}
    > </style>
    >
    > <div id="container1">
    > <div id="one"><img src="ny.jpg" width="128" height="104"

    alt=""><br>one</div>
    > </div>
    >
    > <div id="container2">
    > <div id="two"><img src="ny.jpg" width="128" height="104"

    alt=""><br>two</div>
    > </div>

    brucie,

    OK, that works. Thanks. Three questions (and a challenge):
    Why specify min-width? Seems to work without it.
    Why 49% instead of 50%, which seems to work and gets rid of the boundary
    between the images?
    Why is #one,#two{width:128px;} needed, with width specified on the img
    tag? Seems to work without it. In fact, seems to still work without
    that AND without explicit width and height specified, which allows
    swapping the image without changing the source.

    Now can it be done with 3 (or more) block boxes on the same row?

    Thanks again,
    Chris Beall
    Chris Beall, Jul 19, 2003
    #3
  4. Chris Beall

    brucie Guest

    Re: CSS2 - Centering block boxes - Part 2

    In post <Q6%Ra.3616$>
    Chris Beall said...

    >> <style type="text/css">
    >> #container1,#container2{width:49%;min-width:130px;text-align:center;float:left;}
    >> #container2{float:right;}
    >> #one,#two{width:128px;}
    >> #one{float:right;}
    >> #two{float:left;}
    >> </style>
    >>
    >> <div id="container1">
    >> <div id="one"><img src="ny.jpg" width="128" height="104" alt=""><br>one</div>
    >> </div>
    >>
    >> <div id="container2">
    >> <div id="two"><img src="ny.jpg" width="128" height="104" alt=""><br>two</div>
    >> </div>


    > Why specify min-width? Seems to work without it.


    not in opera or mozilla

    > Why 49% instead of 50%,


    just a bit of a margin between images

    > Why is #one,#two{width:128px;} needed, with width specified on the img
    > tag?


    a width must be specified when floating elements.

    > Now can it be done with 3 (or more) block boxes on the same row?


    <style type="text/css">
    #container{max-width:384px;margin:auto;}
    #container div{width:128px;float:left;text-align:center;}
    </style>
    <div id="container">
    <div><img src="ny.jpg" width="128" height="104" alt=""><br>one</div>
    <div><img src="ny.jpg" width="128" height="104" alt=""><br>two</div>
    <div><img src="ny.jpg" width="128" height="104" alt=""><br>three</div>
    </div>

    not supported by IE

    --
    brucie a. blackford. 19/July/2003 09:15:18 am kilo.
    http://loser.brucies.com/
    brucie, Jul 19, 2003
    #4
  5. Chris Beall

    Chris Beall Guest

    Re: CSS2 - Centering block boxes - Conclusion

    "brucie" <> wrote in message
    news:...
    > In post <Q6%Ra.3616$>
    > Chris Beall said...
    >
    > >> <style type="text/css">
    > >>

    #container1,#container2{width:49%;min-width:130px;text-align:center;floa
    t:left;}
    > >> #container2{float:right;}
    > >> #one,#two{width:128px;}
    > >> #one{float:right;}
    > >> #two{float:left;}
    > >> </style>
    > >>
    > >> <div id="container1">
    > >> <div id="one"><img src="ny.jpg" width="128" height="104"

    alt=""><br>one</div>
    > >> </div>
    > >>
    > >> <div id="container2">
    > >> <div id="two"><img src="ny.jpg" width="128" height="104"

    alt=""><br>two</div>
    > >> </div>

    >
    > > Why specify min-width? Seems to work without it.

    >
    > not in opera or mozilla
    >
    > > Why 49% instead of 50%,

    >
    > just a bit of a margin between images
    >
    > > Why is #one,#two{width:128px;} needed, with width specified on the

    img
    > > tag?

    >
    > a width must be specified when floating elements.
    >
    > > Now can it be done with 3 (or more) block boxes on the same row?

    >
    > <style type="text/css">
    > #container{max-width:384px;margin:auto;}
    > #container div{width:128px;float:left;text-align:center;}
    > </style>
    > <div id="container">
    > <div><img src="ny.jpg" width="128" height="104" alt=""><br>one</div>
    > <div><img src="ny.jpg" width="128" height="104" alt=""><br>two</div>
    > <div><img src="ny.jpg" width="128" height="104" alt=""><br>three</div>
    > </div>
    >
    > not supported by IE
    >
    > --
    > brucie a. blackford. 19/July/2003 09:15:18 am kilo.
    > http://loser.brucies.com/

    brucie,

    OK, I think I see it now. margin: auto on the container does it.

    In the CSS2 specification, for block-level elements in the normal flow,
    sections 10.3.3 & 4, I missed the last line, "If both 'margin-left' and
    'margin-right' are 'auto', their computed values are equal." Equal
    margins thus results in centering.

    I assume 'not supported by IE' means 'IE is not yet a CSS2 conforming
    user agent'. Pity.

    Thanks for the guidance,
    Chris Beall
    Chris Beall, Jul 19, 2003
    #5
  6. Re: CSS2 - Centering block boxes - Conclusion

    In article <82dSa.593$>, Chris
    Beall wrote:

    > I assume 'not supported by IE' means 'IE is not yet a CSS2 conforming
    > user agent'. Pity.


    That aplies to all browsers. In Opera 6 and 7, your problem is simple to
    solve, as they support most CSS2:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <title>Test case </title>
    <style type="text/css">
    body {text-align:center}
    div {display:inline-table;}
    </style>
    <div><img src="ny.jpg" alt=""><br>First block</div>
    <div><img src="ny.jpg" alt=""><br>Second block</div>



    --
    Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
    Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
    tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.
    Lauri Raittila, Jul 19, 2003
    #6
  7. Chris Beall

    Chris Beall Guest

    Re: CSS2 - Centering block boxes - Conclusion

    "Headless" <> wrote in message
    news:...
    > "Chris Beall" <> wrote:
    >
    > >I assume 'not supported by IE' means 'IE is not yet a CSS2 conforming
    > >user agent'.

    >
    > No UA is a "conforming UA" for the entire CSS2 spec, a UA can said to

    be
    > "conforming" on individual parts of the spec only.


    That's not the way I read
    http://www.w3.org/TR/REC-CSS2/conform.html#conformance. Especially the
    part that says "A user agent that renders a document with associated
    style sheets MUST respect points 1 - 5 AND render the document according
    to the media-specific requirements set forth in this specification."
    Nothing there about subsets or partial conformance (except the loophole
    about supporting only one media type; they could support Print media
    only, for example). The IE folks can SAY anything they like, but it
    appears to me that IE does not conform as defined by the W3 folks.
    And I'm sure they both care deeply about my interpretation... :)

    >
    > No browser supports all (relevant) bits of CSS2, and all browsers have
    > CSS bugs. It's just that IE is the undisputed king in the bug and "not
    > supported" department.


    No doubt. I would take the position that a function that is buggy is
    certainly no better than one that is absent. And thus non-conforming.

    Chris Beall
    Chris Beall, Jul 19, 2003
    #7
  8. Chris Beall

    Chris Beall Guest

    Re: CSS2 - Centering block boxes - Conclusion

    "brucie" <> wrote in message
    news:...
    > In post <82dSa.593$>
    > Chris Beall said...
    >
    > >> <style type="text/css">
    > >> #container{max-width:384px;margin:auto;}
    > >> #container div{width:128px;float:left;text-align:center;}
    > >> </style>
    > >> <div id="container">
    > >> <div><img src="ny.jpg" width="128" height="104"

    alt=""><br>one</div>
    > >> <div><img src="ny.jpg" width="128" height="104"

    alt=""><br>two</div>
    > >> <div><img src="ny.jpg" width="128" height="104"

    alt=""><br>three</div>
    > >> </div>
    > >>
    > >> not supported by IE

    >
    > > I assume 'not supported by IE' means 'IE is not yet a CSS2

    conforming
    > > user agent'. Pity.

    >
    > IE doesn't support max-width so the container <div> is the default
    > 100% width. the images are floated to the left so they appear on the
    > left margin. you could use width:384px; but then the images wouldn't
    > reflow to the windows width.


    And I do want reflow. In fact, I started by using your technique of
    creating centering by filling the horizontal space and thus constraining
    the browser, but with percentage widths (width = 33% for each of three
    items in a row). I just couldn't believe that was what the CSS
    designers intended as the way to center things. Apparently it wasn't,
    but the other methods aren't yet widely supported. Oh, well.

    Thanks,
    Chris Beall
    Chris Beall, Jul 19, 2003
    #8
  9. Re: CSS2 - Centering block boxes - Conclusion

    Chris Beall wrote:

    > No doubt. I would take the position that a function that is buggy
    > is certainly no better than one that is absent.


    I'd word it more strongly than that. In a properly written page, much
    less harm will result from some or all of the CSS being ignored, than
    by some/all of it being handled buggily by a particular agent.

    --
    Joel.
    Joel Shepherd, Jul 20, 2003
    #9
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Mark

    XHTML + CSS2 Layout Problem

    Mark, Oct 6, 2005, in forum: ASP .Net
    Replies:
    5
    Views:
    469
    gerry
    Oct 8, 2005
  2. oulan bator

    CSS or CSS2 and XML in Java

    oulan bator, Dec 15, 2005, in forum: Java
    Replies:
    14
    Views:
    1,055
    Oliver Wong
    Dec 20, 2005
  3. Stefan Mueller
    Replies:
    5
    Views:
    12,341
    jamesxa
    Jun 16, 2009
  4. morrell
    Replies:
    1
    Views:
    925
    roy axenov
    Oct 10, 2006
  5. Replies:
    10
    Views:
    803
    Bergamot
    Nov 24, 2008
Loading...

Share This Page