-6
<div class="img">   
<a target="_blank" href="slideshow/slideshow2.jpg"><img src="slideshow/slideshow2.jpg" alt="Klematis" width="110" height="90"></a>
</div>

<div class="img">
 <a target="_blank" href="slideshow/slideshow3.jpg"><img src="slideshow/slideshow3.jpg" alt="Klematis" width="110" height="90"></a>

That is my code that I am using. www.goparkfast.com in the pictures section if you want to see how it is set up on my site.

ngrashia
  • 9,869
  • 5
  • 43
  • 58
user3711144
  • 11
  • img { max-width: 100%; height: auto; } img.scale-with-grid { max-width: 100%; height: auto; } – user3711144 Jun 05 '14 at 12:31
  • that is what I defined img as – user3711144 Jun 05 '14 at 12:31
  • You should have a concise title, then describe your problem with relevant code in the main post. Also edit your post rather than comment edits. – Aravona Jun 05 '14 at 12:32
  • `.img { display:inline:block; }` - as by default a div is a block level element, and will span the width of its parent. – Nick R Jun 05 '14 at 12:32
  • I tried what you said Nick R and it didn't work img { max-width: 100%; height: auto; display:inline:block; } img.scale-with-grid { max-width: 100%; height: auto; } – user3711144 Jun 05 '14 at 12:41
  • Notice the `.` before `img`, you have a `div` with a class of `img`, so the `CSS` should be applied to the `class` (`display:inline-block`) and not the `img tag`. – Nick R Jun 05 '14 at 12:44
  • Also `max-width` won't work if you explicitly declare the width and height of the `` – Nick R Jun 05 '14 at 12:44

2 Answers2

0

Set containing divs to float: left and width: 25%.

Linek
  • 1,353
  • 10
  • 20
  • sorry very noob , this is my first website lol. img { max-width: 25%; height: auto; float:left; } img.scale-with-grid { max-width: 25%; height: auto; } – user3711144 Jun 05 '14 at 12:39
  • is that what you mean? see how I changed .img – user3711144 Jun 05 '14 at 12:40
  • @user3711144 Partly, do you want the images next to the lists to be in rows of 4? Add four images to one of the list and I will show you how to align them on live example. – Linek Jun 05 '14 at 12:44
  • LOL four negatives on my question? First question I asked here and idk what I did wrong. Well Mr.Linek I want them horizontal instead of vertical and when I add four more I want them to appear under and have 16 pictures, four rows of four. Then I can make as many rows as I want – user3711144 Jun 05 '14 at 12:47
  • Add a `div` tag inside `sixteen columns` div and move `a` tag with `img` inside that div. Now set CSS to the `a` tag to `float:left; width: 25%;`. Now set the width to the `div` tag you just created like `width: 400px` (whatever width you want). – Linek Jun 05 '14 at 12:51
0

Try putting the images in divisions and then put a certain size of the division like 25% and lastly mark it to float:left

gomzy
  • 250
  • 1
  • 2
  • 10