Layout of several small images w/in a div

HTML & CSS
1

Howdy all!
Would like some advice

I am experimenting w/div alignment.
for something like this.

<div id="column1">
  <p>Column column1</p>
  <p>some fancy text...hello. hello hello</p>

  <div id="guests">
  <img class="guestSpot" src="tinyPlaceHolders/tph01.jpg" />
  <img class="guestSpot" src="tinyPlaceHolders/tph02.jpg" />
  <img class="guestSpot" src="tinyPlaceHolders/tph03.jpg" />
  <img class="guestSpot" src="tinyPlaceHolders/tph04.jpg" />
  <img class="guestSpot" src="tinyPlaceHolders/tph05.jpg" />
  <img class="guestSpot" src="tinyPlaceHolders/tph06.jpg" />
  <img class="guestSpot" src="tinyPlaceHolders/tph07.jpg" />
  <img class="guestSpot" src="tinyPlaceHolders/tph08.jpg" />
  <img class="guestSpot" src="tinyPlaceHolders/tph09.jpg" />
  <img class="guestSpot" src="tinyPlaceHolders/tph10.jpg" />
  <img class="guestSpot" src="tinyPlaceHolders/tph11.jpg" />
  <img class="guestSpot" src="tinyPlaceHolders/tph12.jpg" />
  <img class="guestSpot" src="tinyPlaceHolders/tph13.jpg" />
  <img class="guestSpot" src="tinyPlaceHolders/tph14.jpg" />

  </div> <!--guests-->
</div> <!--column1-->

and the respective css

#column1 {
        float: left;
        background: #ccc;
		margin: 10px 5px;
        width: 150px;
		min-height:500px;
		border-left:medium #666666 solid;
    }

#guests{
margin:auto;
}
.guestSpot{

padding: 2px 2px;
}

Is there a css way to place three or four or whatever per row. Or would a table be the only way?
Also when it comes to centering the images. setting auto on the side margins either on the containing div or images themselves does not seem to work.

Thanks
D

2

to be specific this is the site I am playing with.
Just exercising. And am really want to focus on aligning multiple images.

http://www.thebigmeow.us/

3

Yup, use a <ul>, give the <li>s a width and height and float them. Definitely don’t use a table. :slight_smile:

Regarding the centering, you need to give the element a width for it to center.

4

good point! Forgot about the <ul>
will go & try it out.
thanks
D

5

@pdxSherpa;

Play about with this script:



<style type='text/css'>
  #jb {text-align:center; width:555px; margin:3em auto; border:solid 1px #f00;  /*padding:0 0 0 4em */}
  #jb img {float:left; max-width:30%; margin:1em }
</style>

<div id='jb'>
  <img src='http://subs.localhost/thumb/img_thumb.jpg' alt='#' />
  <img src='http://subs.localhost/thumb/img_thumb.jpg' alt='#' />
  <img src='http://subs.localhost/thumb/img_thumb.jpg' alt='#' />
  <img src='http://subs.localhost/thumb/img_thumb.jpg' alt='#' />
  <img src='http://subs.localhost/thumb/img_thumb.jpg' alt='#' />
  <img src='http://subs.localhost/thumb/img_thumb.jpg' alt='#' />
</div>
6

K thanks John, will give it a shot as well. But so far for the record I am fairly clue less about php.
Thank you

7

Whoops, sorry about the PHP wrapper I use it so that the HTML script is formatted OK

edit: Managed to change the post before the time limit clicked in :slight_smile:

8

so just I get this better:

  1. would you folks be against tables even for something this simple?
  2. From what i understand tables are still good for data (which of course could be up to interpretation) just don’t use the for the entire layout of the site.
9

Yes. :slight_smile:

From what i understand tables are still good for data (which of course could be up to interpretation) just don’t use the for the entire layout of the site.

Yes. :slight_smile:

Tables are for data that need to be arranged in columns and rows to be meaningful. The table structure is intended to preserve these relationships between the various data, and thus are unsuitable (from a semantic point of view) for whole page layouts.

What you are creating in this case is really a list of icons or avatars. Hence the preference for a list.

10

Thank you Ralph…
appreciate the advice!