Centering floating items

Discussion in 'HTML' started by djcredo@gmail.com, Oct 18, 2006.

  1. Guest

    I have a rollover list which needs to be centered. I cannot use
    display:inline, because I must be able to ensure the width of each list
    item is eactly 100px. Inline doesnt let you specify width, and if you
    use margin-left and margin-right you can't be sure you are getting the
    right size because the width will depend on the number of characters in
    the list item.

    So I want to use "float:left" with "display:block" items. Now I can
    specify the width, but can't center the items! They all stack up on the
    left hand side.

    Does anyone have any solutions to this problem?

    Many thanks,
    Matt
    , Oct 18, 2006
    #1
    1. Advertising

  2. Els Guest

    wrote:

    > I have a rollover list which needs to be centered. I cannot use
    > display:inline, because I must be able to ensure the width of each list
    > item is eactly 100px. Inline doesnt let you specify width, and if you
    > use margin-left and margin-right you can't be sure you are getting the
    > right size because the width will depend on the number of characters in
    > the list item.
    >
    > So I want to use "float:left" with "display:block" items. Now I can
    > specify the width, but can't center the items! They all stack up on the
    > left hand side.
    >
    > Does anyone have any solutions to this problem?


    If you know the amount of items, their width (100px) and the margin
    between them, put them in a container with a set width, which you then
    center. What I don't understand though, is how you say "each list item
    is exactly 100px", and "width will depend on the number of characters
    in the list item". Seems like a contradiction.

    There are ways to have blocks with set widths centered regardless of
    their amount, but it does need a bit more tricky CSS. My guess is the
    centered container approach will work for you though?

    --
    Els http://locusmeus.com/
    accessible web design: http://locusoptimus.com/

    Now playing: Elly & Rikkert - Het woord van onze God
    Els, Oct 18, 2006
    #2
    1. Advertising

  3. Ben C Guest

    On 2006-10-18, <> wrote:
    > I have a rollover list which needs to be centered. I cannot use
    > display:inline, because I must be able to ensure the width of each list
    > item is eactly 100px. Inline doesnt let you specify width, and if you
    > use margin-left and margin-right you can't be sure you are getting the
    > right size because the width will depend on the number of characters in
    > the list item.
    >
    > So I want to use "float:left" with "display:block" items. Now I can
    > specify the width, but can't center the items! They all stack up on the
    > left hand side.


    Yes, you could say they all "float" to the left :)

    > Does anyone have any solutions to this problem?


    Don't use floats. You can give a float a left margin, but you will have
    to work out how big to make it yourself to achieve centering (don't go
    there). Absolute positioning is much better for this because the browser
    will centre it for you if you set left and right margins to auto
    (provided you also set left, right and width).

    Here is an example:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
    <html>
    <head>
    <title>Test Page</title>
    <style type="text/css">
    ul
    {
    position: absolute;
    left: 0px;
    right: 0px;
    width: 100px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    }
    li
    {
    list-style-type: none;
    border: 1px solid black;
    }
    </style>
    </head>
    <body>
    <ul>
    <li>apples</li>
    <li>pears</li>
    <li>oranges</li>
    </ul>
    </body>
    </html>
    Ben C, Oct 18, 2006
    #3
  4. Nico Schuyt Guest

    Ben C wrote:
    > Don't use floats. You can give a float a left margin, but you will
    > have
    > to work out how big to make it yourself to achieve centering (don't go
    > there). Absolute positioning is much better for this because the
    > browser
    > will centre it for you if you set left and right margins to auto
    > (provided you also set left, right and width).
    > Here is an example:
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > "http://www.w3.org/TR/REC-html40/strict.dtd"> <html>
    > <head>
    > <title>Test Page</title>
    > <style type="text/css">
    > ul
    > {
    > position: absolute;
    > left: 0px;
    > right: 0px;
    > width: 100px;
    > margin-left: auto;
    > margin-right: auto;
    > padding: 0px;
    > }
    > li
    > {
    > list-style-type: none;
    > border: 1px solid black;
    > }
    > </style>
    > </head>
    > <body>
    > <ul>
    > <li>apples</li>
    > <li>pears</li>
    > <li>oranges</li>
    > </ul>
    > </body>
    > </html>


    In IE there´s a vertical list on the left
    In FF the (vertical) list is centered on the page

    --
    Nico Schuyt
    http://www.nicoschuyt.nl/
    Nico Schuyt, Oct 18, 2006
    #4
  5. Ben C Guest

    On 2006-10-18, Nico Schuyt <> wrote:
    > Ben C wrote:

    [snip]
    >> ul
    >> {
    >> position: absolute;
    >> left: 0px;
    >> right: 0px;
    >> width: 100px;
    >> margin-left: auto;
    >> margin-right: auto;
    >> padding: 0px;
    >> }
    >> li
    >> {
    >> list-style-type: none;
    >> border: 1px solid black;
    >> }
    >> </style>
    >> </head>
    >> <body>
    >> <ul>
    >> <li>apples</li>
    >> <li>pears</li>
    >> <li>oranges</li>
    >> </ul>
    >> </body>
    >> </html>


    > In IE there´s a vertical list on the left


    Oh dear...

    > In FF the (vertical) list is centered on the page


    Yes, that was intended (and I thought the effect you wanted?)
    Ben C, Oct 18, 2006
    #5
  6. I don't know why the absolute positioning is necessary.

    This works for Explorer, Firefox, Netscape, and Opera:

    http://www.xlectric.com/temp/centertest.html

    And with that I don't know why I had to use float-right for #d4. I
    thought the float-left for #d3 would be enough.

    I used fixed/percent width and height values for the divisions because
    they have no content.

    Art
    X l e c t r i c, Oct 18, 2006
    #6
  7. Ben C Guest

    On 2006-10-18, X l e c t r i c <> wrote:
    > I don't know why the absolute positioning is necessary.


    It was to get shrink-to-fit width on the <ul>. Your divs are nicely
    centered, but you had to set widths on them. If they were width: auto,
    they'd fill the whole containing width.

    > This works for Explorer, Firefox, Netscape, and Opera:
    >
    > http://www.xlectric.com/temp/centertest.html
    >
    > And with that I don't know why I had to use float-right for #d4. I
    > thought the float-left for #d3 would be enough.


    If you remove the float: right for #d4 what happens is #d3 floats left,
    and then #d4 starts a new block box, below the anonymous block box
    contanining #d3.

    Floats that overflow the block box in which they originate appear on top
    of subsequent block boxes (and their inline content has to flow around
    them). This is explained in the CSS 2.1 spec in the section on floats and
    also see the section on stacking levels which explains why #d3 is on top of
    #d4 even though #d3 appears earlier in the document.

    #d3 does overflow its own (anonymous) block box and so ends up on top of
    #d4. #d4 is 400px px wide, #d3 only 200px, so you see half of #d4
    sticking out from behind #d3.
    Ben C, Oct 19, 2006
    #7
  8. Ben C Guest

    On 2006-10-19, Ben C <> wrote:
    > On 2006-10-18, X l e c t r i c <> wrote:
    >> I don't know why the absolute positioning is necessary.

    >
    > It was to get shrink-to-fit width on the <ul>. Your divs are nicely
    > centered, but you had to set widths on them. If they were width: auto,
    > they'd fill the whole containing width.


    No. You were right, the absolute positioning was not necessary.

    I had:

    position: absolute;
    left: 0px;
    right: 0px;
    margin-left: auto;
    margin-right: auto;
    width: 100px;

    to centre a box with the width set to 100px. This works just as well:

    margin-left: auto;
    margin-right: auto;
    width: 100px;

    Easy, because the width is known to be 100px. No need for absolute
    positioning. The OP said that the width was 100px, so that's fine.

    But can we centre a shrink-to-fit box? I actually don't think it's
    possible (without JS or a table).

    Absolutely positioned boxes are shrink-to-fit if they have auto width,
    but not if you try to centre them with auto margins. For example:

    position: absolute;
    left: 0px;
    right: 0px;
    margin-left: auto;
    margin-right: auto;
    width: auto;

    will fill the full containing width, because the UA solves for width
    such that left + width + right = containing width and leaves the margins
    at 0.

    The only condition under which a positioned box is centred is if left,
    right and width are _all_ set to something, but left and right margins
    are both auto. These are the CSS rules. There's no way to say we want
    the shrink-to-fit width, and equal space either side.

    The table solution is this:

    <table style="width: 100%">
    <td style="width: 50%">
    </td>
    <td style="border: 1px solid black">
    Hello
    </td>
    <td style="width: 50%">
    </td>
    </table>

    "Hello" is shrink-to-fit and centered.
    Ben C, Oct 19, 2006
    #8
  9. Ben C wrote:

    "Absolutely positioned boxes are shrink-to-fit if they have auto width,
    but not if you try to centre them with auto margins."

    Yes, I've been trying out what you've posted and that is the result that
    I get.

    My question is this:

    Is there a way to shrink-to-fit a block level box without using absolute
    positioning ? You know, so the width of the box conforms to the width of
    the content, like a table.

    Art
    X l e c t r i c, Oct 20, 2006
    #9
  10. Ben C Guest

    On 2006-10-20, X l e c t r i c <> wrote:
    > Ben C wrote:
    >
    > "Absolutely positioned boxes are shrink-to-fit if they have auto width,
    > but not if you try to centre them with auto margins."
    >
    > Yes, I've been trying out what you've posted and that is the result that
    > I get.


    And this is what the spec (CSS 2.1) says, in different words. It's in
    section 10.6.4.

    > My question is this:
    >
    > Is there a way to shrink-to-fit a block level box without using absolute
    > positioning ?
    > You know, so the width of the box conforms to the width of the
    > content, like a table.


    You can also use a float. You can't centre floats, but neither can you
    centre shrink-to-fit abs pos.

    You can also use display: inline-block, and you can centre those too
    just by making the container "text-align: center". This would be
    preferable to the table solution I posted earlier, except that FF
    doesn't support display: inline-block. Opera and Konqueror do.

    For the sake of completeness, the other ways to do it are display:
    table, display: table-cell or position: fixed.
    Ben C, Oct 20, 2006
    #10
  11. Ed Seedhouse Guest

    On Fri, 20 Oct 2006 04:51:43 -0400, (X l e c t r i c)
    wrote:

    >Is there a way to shrink-to-fit a block level box without using absolute
    >positioning ? You know, so the width of the box conforms to the width of
    >the content, like a table


    Yes. Floated elements shrink to fit.
    Ed Seedhouse, Oct 20, 2006
    #11
    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. Gilles Kuhn
    Replies:
    0
    Views:
    426
    Gilles Kuhn
    Sep 15, 2003
  2. Bart Van Hemelen
    Replies:
    2
    Views:
    4,655
    Bart Van Hemelen
    Sep 4, 2006
  3. Replies:
    2
    Views:
    334
    Jim Moe
    Dec 5, 2006
  4. Larry Bud
    Replies:
    13
    Views:
    7,649
    Larry Bud
    Jan 7, 2008
  5. teeshift
    Replies:
    2
    Views:
    243
    Chris Pearl
    Dec 1, 2006
Loading...

Share This Page