SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Nov 2005
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS:Three Div boxes Horizontal centering

    I am trying to get three boxes centered in a div container. Problem is that the margin should be equally on all boxes.

    The code I have now is :
    HTML Code:
    <div id="content">
     <div class="posterbox"><img class="frontposter" alt="filmposter" src="posters/poster1.jpg" /></div>
     <div class="posterbox"><img class="frontposter" alt="filmposter" src="posters/poster2.jpg" /></div>
     <div class="posterbox"><img class="frontposter" alt="filmposter" src="posters/poster3.jpg" /></div>
     <div class="clear"></div>
    </div>
    
    CSS Code for above code :
    #content {
      width:500px;
      margin:0px auto;
      text-align:center;
      padding:15px;
      border:1px dashed #333;
      background-color:#eee;
     }
    
    /* Frontpage Film Posters */
    
    .posterbox {
      border: 1px solid #d4d4d4;
      background : #e4e6e5;
      width: 150px;
      float: left;
      margin: 0px auto 0px auto;
     }
     
    .frontposter {
      border: 3px solid #fff;
      margin: 5px;
    }
    The result of that is this :

    I can add margins to all posters seperatly, but than I need three different classes/ids and I was wondering if I can only use 1.
    Last edited by marnixk; Jul 29, 2006 at 07:07.

  2. #2
    SitePoint Addict
    Join Date
    Mar 2005
    Location
    Toronto
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm, since you have the fixed pixels,I would suppose that you could do a manual setup. In your container div, you have 500 pixels. You want to separate them into three sections each one will have a 1px border and a width so, 500/3 = 166.66.. and suppose you have all 166px boxes, minus the border, you would have 164 px. This way, you would have 164 px width with 1px border, with only an offset of 2 px for the entire container div. Not sure if this is what you mean.
    In search of the clouds...and maybe some work

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    You'll have to hard code it as mentioned above.
    Code:
    #content {
      width:530px;
      margin:0px auto;
      text-align:center;
      padding:15px 0;
      border:1px dashed #333;
      background-color:#eee;
     }
    /* Frontpage Film Posters */
    .posterbox {
      border: 1px solid #d4d4d4;
      background : #e4e6e5;
      width: 150px;
      float: left;
      margin-left:18px;
      display:inline;/* ie double margin bug*/
     }


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
  •