Image Box/Caption Positioning Problem

Discussion in 'CSS' started by PalSys, Jan 18, 2009.

  1. #1
    I'm guessing this is an easy fix but I can't seem to come up with a CSS class that will work for me.

    See this page (example link removed).

    Ignoring the styling problems with the border, all I want to do here is have the ability to display the boxes next to eachother and have them retain centered alignment whether I have 2, 3, 4, etc.

    Obviously at this point my divs are stacking the boxes vertically and this horizontal thing is escaping me :)

    Thanks in advance to any and all potential helpers!

    My CSS

    
    /* Image Captions */
    
    .imagebox {
      width: 150px;
      align: right;
      margin: 1.25em auto 0;
      }
    
    .caption {
      font-size: .8em;
      padding: 0 .6em 0 0;
      border: solid black;
      border-width: 0 1px 1px;
      }
    
    
    Code (markup):
    My HTML (3 duplicate boxes in this case)

    
    <div class="imagebox">
      <a href="http://www.domain.com/image.gif"><img src="http://www.domain.com/image2.gif" /></a>
    <div class="caption"> 
      <p>Caption text.</p>
    </div>
    </div>
    
    <div class="imagebox">
      <a href="http://www.domain.com/image.gif"><img src="http://www.domain.com/image2.gif" /></a>
    <div class="caption"> 
      <p>Caption text.</p>
    </div>
    </div>
    
    <div class="imagebox">
      <a href="http://www.domain.com/image.gif"><img src="http://www.domain.com/image2.gif" /></a>
    <div class="caption"> 
      <p>Caption text.</p>
    </div>
    </div>
    
    Code (markup):

     
    PalSys, Jan 18, 2009 IP
  2. Anthony Thomas

    Anthony Thomas Peon

    Messages:
    46
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I'd put the three 'imagebox' div's inside another div with a set width of 450px (the three boxes put together).

    Apply { float: left; } to the 'imagebox' divs too

    Apply the { margin 0px auto; } to the new box as well to center the new box.

    There may be better solutions but that works :)
     
    Anthony Thomas, Jan 18, 2009 IP
    PalSys likes this.
  3. PalSys

    PalSys palsys.io

    Messages:
    2,628
    Likes Received:
    224
    Best Answers:
    0
    Trophy Points:
    230
    #3
    @ Anthony

    That was perfect - my earlier attempts at an extra failed div miserably but this did the trick exactly - thanks!

    Just a note to others who may read this: I added a 5px padding in the new div to keep the image boxes seperate and clean :)
     
    PalSys, Jan 18, 2009 IP
  4. Anthony Thomas

    Anthony Thomas Peon

    Messages:
    46
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Glad I could help, if other bugs occur because of the floated div's - you might want to look up using a 'clear' div

    .stylename { clear:both; }

    this would be placed on an element that would go underneith the three floated divs, inside the containing div.

    but otherwise don't wrorry :)
     
    Anthony Thomas, Jan 19, 2009 IP