Aligining multiple images on a single line with CSS

  • doraima29
  • Novice
  • Novice
  • doraima29
  • Posts: 31
  • Loc: California

Post 3+ Months Ago

Hi,

I'm trying to align multiple thumbnails in a single line with CSS. I wonder how it is being done.

Let me write some code:

HTML

<div class="maincontainer">
<ul class="ppix">
<li caption="4 Physical Elements"><a href="../images/3dillus_4elements.jpg></li>
<li caption="Disco Poster Freak"><a href="../images/3dillus_discoposter.jpg></li>
<li caption="Intergalactic Whirlwind"><a href="../images/3dillus_whirlwind.jpg></li>
</ul>
</div>

CSS {}

I wanted to align 3 to 4 images on a single line and then the rest to flow below the first line. I have the freedom to adjust margin and padding to see how close the images are arranged. Also, wanted to include a caption below each thumbnail.

Is there a way to be done on a multiple column list instead of using multiple divs?
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1827
  • Loc: In the Great White North

Post 3+ Months Ago

in your css
Code: [ Select ]
.maincontainer{
width:500px; /* something thats only wide enough for 3 images */
}

.ppix li{
float:left;
}
  1. .maincontainer{
  2. width:500px; /* something thats only wide enough for 3 images */
  3. }
  4. .ppix li{
  5. float:left;
  6. }
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2193
  • Loc: Canada

Post 3+ Months Ago

Assuming you have variable heights, that won't be enough because each new line can look severely messed up and not even have 3 in a line because of the float interfering.
You're either going to want to span every 3 images and float that as well, or simply put 3 images in your <li>.

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 17 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.