SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Pointiest Petitions carrotflowers's Avatar
    Join Date
    Jul 2003
    Location
    Suburbs of DC (MD)
    Posts
    595
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    centering a row of images/captions

    Hey there,
    I am still struggling with this page of images. Recently I menrioned I couldn't get them to line up in a row using the float technique on Mac/IE. Well, I added a width of 175 px (the widest pic) to the div.float class and now they line up. However, I want them to center on the page in their row, and I can't figure it out. Can anyone help?

    The images are in a container div, in order to get a bg color, so it's inside this container that I want each row to appear centered. The page is at http://dapperdesigns.net/clients/fe/...ed_items.shtml

    The CSS:
    div.float {
    float: left;
    width: 20%;
    margin-top: 4%;
    text-align: center;
    }

    div.float p {
    text-align: center;

    }
    #greencontainer {
    background-color: #e7f5db;
    padding: 1%;
    margin-top: 0%;
    margin-right: 6%;
    margin-bottom: 1%;
    margin-left: 6%;
    }

    div.spacer {
    clear:both;
    }

    The html:
    <body>
    <!--#include virtual="header.html" -->

    <div id="greencontainer">
    <div class="spacer">
    &nbsp;
    </div>
    <div id="header">
    <img src="images/header_featured.gif">
    </div>
    <div class="float"> <img src="images/featured_items/tb_broyhill_chair_ottoman.jpg" width="89" height="125" border="1">
    <p>broyhill chair &amp; ottoman</p>
    </div>

    <div class="float"> <img src="images/featured_items/tb_double_rocker.jpg" border="1" />
    <br />
    <p>double rocker</p>
    </div>
    <div class="float"> <img src="images/featured_items/tb_fishtank_radio.jpg" border="1" />
    <br />
    <p>fishtank radio</p>
    </div>
    <div class="float"> <img src="images/featured_items/tb_gold_leaf_egrets.jpg" width="114" height="125" border="1" />
    <br />
    <p>gold leaf with egrets</p>
    </div>

    <div class="float">
    <img src="images/featured_items/tb_grandfather_clock.jpg" width="76" height="125" border="1" />
    <br />
    <p>grandfather clock</p>
    </div>

    <div class="float"> <img src="images/featured_items/tb_set_4_chairs.jpg" width="172" height="125" border="1" />
    <br />
    <p>set of 4 chairs</p>
    </div>
    <img src="images/definition.gif">
    <div class="spacer">
    &nbsp;
    </div>
    </div>

    <!--#include virtual="footer.html" -->
    </body>

    Sorry this is so long. Thanks!

  2. #2
    SitePoint Addict
    Join Date
    Jun 2003
    Location
    Barrie, Ontario, Canada
    Posts
    316
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    have you tried putting text-align:center; in your #greencontainer?

    I just had a quick look, so this is a very simple response

  3. #3
    Pointiest Petitions carrotflowers's Avatar
    Join Date
    Jul 2003
    Location
    Suburbs of DC (MD)
    Posts
    595
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, I did try that, and at least on a mac it didn't have an effect--in IE, NS6 or Opera. Thanks, though!


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
  •