Spacing between
's

Question

So I'm a little stumped. I'm trying to make a page to display images. I want there to be 5 images per row spaced with maximum amount when the window is at max width (~950 px), but I want them to get closer as you make it smaller and then, when there's 0 px between them, there will only be 4 images per row, and that will continue until a specific width. Kind of like Instagram, but I don't want the pictures to get smaller. Here's what I have:

HTML

<ul>
   <li>
      <img src="0.png">
   </li>
</ul>
<ul>
   <li>
      <img src="1.png">
   </li>
</ul>
<ul>
   <li>
      <img src="2.png">
   </li>
</ul>

CSS

ul
{
    padding: 0;
    margin: 0;
    list-style-type:  none;
}

ul li
{
    display: inline;
}

//the images are also float left, so they are horizontal

Basically, as you can see, I have nothing and I don't really know what to do. I'd appreciate any help. Thanks!

@JimW No. No. No. http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html — iambriansreed, Oct 18 '13 at 20:10

score 0 · Answer 1 · answered Oct 18 '13 at 20:13

Can you do me a favor and try this fix (I know there is an obnoxious invisible-spacing bug related to lis written on newlines in the HTML, not sure if it applies to UL's in order too but it's worth a shot) --

<ul><li><img src="0.png"></li></ul><ul><li><img src="1.png"></li></ul><ul><li><img src="2.png"></li></ul>

score 0 · Answer 2 · answered Oct 18 '13 at 20:14

this may get you closer to where you want to go:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
ul {
    padding: 0;
    margin: 0;
    list-style-type:  none;
    min-width:450px;
}
ul li {
    display: inline;
    float:left;
    width:20%;
}
</style>
</head>

<body>
<ul>
  <li> <img src="0.png" width="150" height="50"> </li>
  <li> <img src="1.png" width="150" height="50"> </li>
  <li> <img src="2.png" width="150" height="50"> </li>
  <li> <img src="0.png" width="150" height="50"> </li>
  <li> <img src="1.png" width="150" height="50"> </li>
  <li> <img src="2.png" width="150" height="50"> </li>
</ul>
</body>
</html>

It is more "proper" markup to put all the images into one list, and opens the door for setting a hard minimum width on the ul but a % on the li... which is what makes the whitespace vary with the window sizing. I am not sure if this gets you all the way there, but hopefully it will help!

They're overlaying each other. But I do like how it stretches when I expand the page. — Shahar, Oct 18 '13 at 20:21

score 0 · Answer 3 · answered Oct 18 '13 at 20:15

0

Your unordered list should look like this:

<ul><li><img src="0.png"></li><li><img src="1.png"></li><li><img src="2.png"></li></ul>

Super unconventional, but it works.

Fiddle here: http://jsfiddle.net/QMs93/

answered Oct 18 '13 at 20:15

Colin Keany

309
1
3
9

I didn't do that, the person who edited my post did. I did it the way you wrote it. – Shahar Oct 18 '13 at 20:18
Oh ok, well check out my edited response with a fiddle. Should help! – Colin Keany Oct 18 '13 at 20:18

score 0 · Answer 4 · answered Oct 18 '13 at 20:15

0

http://jsfiddle.net/AgLMp/1

CSS

ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
    max-width: 950px;
    min-width: 600px;
}

ul li {
    float: left;
    width: 33%;
    min-width: 200px;
}

HTML

<ul>
    <li>
        <img src="http://placehold.it/200x200/ff0000/00ffff&text=Image+1" />
    </li>
    <li>
        <img src="http://placehold.it/200x200/00ff00/ff00ff&text=Image+2" />
    </li>
    <li>
        <img src="http://placehold.it/200x200/0000ff/ffff00&text=Image+3" />
    </li>
</ul>

answered Oct 18 '13 at 20:15

Mr. Polywhirl

42,981
12
84
132

Doesn't seem to do his thing of having one less column as the width narrows. – Jim W Oct 18 '13 at 20:17
Wow really close. Although if I make it smaller so that there are 2 boxes in each row, I want them to be spread out as well. Do you know how to do that? – Shahar Oct 18 '13 at 20:19
Like this? http://jsfiddle.net/AgLMp/2 – Mr. Polywhirl Oct 18 '13 at 20:32
@Mr.Polywhirl No so when I make the window smaller, there will be only 3 boxes. But I want them to be spaced from each other all the way. What you had the first time was good, although when I made the screen smaller, there would be 2 images but I want them to be spaced from each other as the initial 3 were. – Shahar Oct 18 '13 at 20:36

score 0 · Answer 5 · answered Oct 18 '13 at 20:22

0

like this? http://jsfiddle.net/fqTsN/

remove the float:left from your pictures by the way! I fixed that too (it's horizontal without float:left;

answered Oct 18 '13 at 20:22

Scott Rowell

1,135
6
8

score 0 · Answer 6 · answered Oct 18 '13 at 23:41

0

your best and fastest bet for more control is to use media queries, or you could also use Bootstrap.

answered Oct 18 '13 at 23:41

Devin

7,690
6
39
54

score 0 · Answer 7 · answered Oct 19 '13 at 00:39

0

As everyone else has said:

<ul>
 <li>Stuff</li>
  <li> Other Stuff</li>
  </ul>

answered Oct 19 '13 at 00:39

Durnehviir

56
1
8

Spacing between 's

7 Answers7

Spacing between
's