[Enormity]

Short and simple...

I have profile pics I am trying to get to line up in groups of 3 per line. I do not want to use a table, and have decided to use the CSS float property. I had used previously the CSS display:table-row/table-cell property, but noticed that IE did not like this. And since i want my site to look the same in either IE or Firefox, but wanted to change my code. So now I have:

PHP Code:

<div class="container"><div class="myborder">

     <?

     while ($i < count(pics)){

     ?>

          <div class="floatleft">

          <img scr="myimgsrc" />

          </div>

          <?

          $i++;

          if (($i % 3) == 0){

               echo "</div><div class="myborder''>";

          }

     }

     ?>

</div><br class="clear" /></div>

CSS Code

Code:

.container{
     background:#000000;
}
.myborder{
     border:2px #777777 solid;
     padding:10px;
}
.floatleft{
     float:left;
     margin:20px;
}
.clear{
     clear:??????;
}

Now this actually works perfectly. The container holds all of the pics, the myborder puts a background/border around the photo, and the floatleft aligns them all on the same row in groups of 3 on each row spacing them out along the row. My problem, however, is that the container does not extend length-wise to accommodate all the rows of pics.

Now I know that I could throw a clear:left or even a clear:both in as my clear class' clear property, but that is where my problem comes in. All of this code is in the right column on my page. The left column, of course, is being floated left. So when I throw that in as my clear property, the br tag clears the entire left column as well, leaving an awful space in the container div.

I've tried changing my code to float the pics right instead of left and just clearing right, which would work except that unless you have a number of pics evenly dividable by 3, the remaining 1 or 2 pics would look like they are aligned right instead of left, or even centered. I've even tried using margins, floating some and not others, and a lot more I can't even remember. Does anyone have a fix for this that does not include using tables, that works the same in IE as well as Firefox? Remember that I cannot clear left because of my main left column that is floated left, and I want the pics to appear as if they are aligned left, or at least centered.

My website is http://vgt-central.com, which you can look at any profile that is testing games or has games being tested. My own is a good example, http://vgt-central.com/testers/profi...faea47e2868c67. The layout I am currently testing is the Games This Person Is Testing field. Right now, I went ahead and left it as floated right so that I could clear right. But I would be grateful for a work-through of this issue. Thanks to anyone who is willing, and especially for those who success, to help me with this.

------------------------------------------------------------------------------------------------------------------------------------------

OMG!!! I just figured it out! lol, I want to post this anyways just in case someone else has the same problem as I, so please don't delete this...

So while typing all of this, I kept thinking about my problem. (I've got a bad habit of not wanting to stop in the middle of stuff just for "sleep".) So then I thought about "display:inline" and thought I'd give that a try. Long story short, I had to use "display:inline-block" with a span tag (for IE) to get it to work. Here is my new code:

PHP Code:

<div class="container"><div class="centeralign">

     <?

     while ($i < count(pics)){

     ?>

          <span class="InlineBlock">

          <div class="myborder">

          <img scr="myimgsrc" />

          </div>

          </span>

          <?

          $i++;

          if (($i % 3) == 0){

               echo "</div><div class="myborder''>";

          }

     }

     ?>

</div><br class="clear" /></div>

CSS Code

Code:

.container{
     background:#000000;
}
.myborder{
     border:2px #777777 solid;
     padding:10px;
}
.InlineBlock{
     display:inline-block;
}
.centeralign{
     text-align:center;
}

You have to use a span tag for the inline-block due to IE only allowing this attribute if the tag is originally an inline element anyways. But this works now, with the pics being centered, on both IE and Firefox. So thanks to anyone who would have helped, but I'm good now. And I hope this is able to help anyone else that may have this problem.