SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Altbach, near Esslingen, Stuttgart
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to center floats?

    Hi forum,

    I'm trying to build a simple html/css page, which should look like the following:

    The page consists of fixed size boxes, say pictures, which float and should be centered. In other words, the pictures form a variable column table, whose columns (the pictures) should be centered. Hope this is understandable.

    Example: Say the browser's width is wide enough to display one picture per row, but not wide enough to display two. So only one picture should be displayed and it should be centered, which means left and right margins are equal. Now the browser's width is increased so that two pictures can be displayed per row. The pictures should now rearrange, so that two pictures are displayed per row and they should be centered, which means left and right margins should be equal. This should go on for three or more pictures.

    Here's some simple example code, which nearly does what I want:

    <html>
    <head>
    <style>
    <!--
    div.box {
    width: 200px;
    height: 100px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid black;
    background-color: yellow;
    float: left;
    }
    -->
    </style>
    </head>
    <body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    </body>
    </html>

    All I want is, that these yellow boxes are centered, instead of left aligned. This works fine without float: left; doesn't with it.

    So I wonder if there's a trick to make them centered? Any hints?

    Thanks in advance,
    haukero.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,283
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The only solution I found was by forcing ie into quirks mode with the xml prologue.

    Heres the test page:

    http://www.pmob.co.uk/temp/centremultipledivs.htm

    It works in ie and firefox (and opera7). I don't know how it will stand up in real life as this was only an exercise but you're welcome to try it and see how you get on.

    Unfortunately there is no real way to centre floated elements or multiple block elements in ie. Mozilla browers etc can use display:table to get the job done but ie doesn't understand it.

    Tables won't be much use either , although they will centre nicely the images won't drop down like floats.

    Hope its of some use anyway.

    Paul
    Edit:


    if the images do not have captions then you don't need to float them at all but leave them inline and use text-align:center on the parent.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •