how to make images show in two lines when use float:left

Question

<style>
.thumbnail
{
float: left;
width: 60px;
border: 1px solid #999;
margin: 0 15px 15px 0;
}
</style>
<div class="thumbnail">
<img src="images/image.gif" alt="" width="60" height="60"><br>
Caption
</div>
<div class="thumbnail">
<img src="images/image.gif" alt="" width="60" height="60"><br>
Caption
</div>
<div class="thumbnail">
<img src="images/image.gif" alt="" width="60" height="60"><br>
Caption
</div>

<br />
<div class="thumbnail">
<img src="images/image.gif" alt="" width="60" height="60"><br>
Caption
</div>
<div class="thumbnail">
<img src="images/image.gif" alt="" width="60" height="60"><br>
Caption
</div>
<div class="thumbnail">
<img src="images/image.gif" alt="" width="60" height="60"><br>
Caption
</div>

Question:

I want to show 6 imgs in two lines, so I use <br /> after the first 3 images, but it does not work, the last 3 imgs still show at the right side of the first 3 imgs, they just start from a new line, can anyone explain why this happen? and how to fix it?

score 3 · Answer 1 · answered Jul 23 '13 at 07:24

3

Try this and Remove Br Tag

.clr{clear:both;}

Replace br into this <div class="clr"></div>

Demo

answered Jul 23 '13 at 07:24

Rohit Azad Malik

31,410
17
69
97

Don't need to clear both... this works - but to be clear, when you say you are clearing: left; you are sending each float: left down to the next space available after the previous block. This isn't so much as "can anyone explain why this happen?" as much as it is just a quick fix with no learning. + it doesn't really show where to use the .clr div ... – nouveau Jul 23 '13 at 07:53

score 1 · Answer 2 · answered Jul 23 '13 at 07:26

1

without touching up markup you can set br to clear: both; demo

But best practice is to wrap your div like this

<div>
<!---your floating div-->
<!---your floating div-->
<!---your floating div-->
</div>
<div>
<!---your floating div-->
<!---your floating div-->
<!---your floating div-->
</div>

Then you can apply display: table-row;

demo

answered Jul 23 '13 at 07:26

Bhojendra Rauniyar

83,432
35
168
231

If your loop, assuming that you might populate this list (this should be a list) with php or something ---- is going to be more than 3 items at a time, this isn't going to do the trick as far as reusable code. But definitely not an approach I thought of. So, cool! – sheriffderek Jul 23 '13 at 07:43

score 1 · Accepted Answer · answered Jul 23 '13 at 07:35

1

Check this out: http://jsfiddle.net/sheriffderek/4KMhC/

<br /> is for line break - It's for inline elements. It doesn't play with floats.

Floats are like gravity turned sideways... sort of...

You want to float the .thumbnails left --- then, based on their outer container, in this case, the body ... they will have a left directional gravity and naturally break when they run out of room (to the next "line") or however you choose to think about it. If you ask a more detailed question - I might give you a more detailed answer. Let me know when you are ready. I hope this is helpfull / and not so responsive that it is scary.

CSS

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
/* use box-sizing --- it moves the padding inside the box instead of outside ... win! */

html, body { /* basic reset */
    margin: 0;
    padding: 0;
}

.thumbnail {
    float: left;
    width: 33.33333%;
    border: 1px solid #999;
}

.thumbnail img {
    display: block;
    width: 100%;
    height: auto;
}

HTML

<div class="thumbnail">
    <img src="http://placehold.it/100x100" alt="thumbnail" />
    <h3>Caption</h3> <!-- arbitrary img size -->
</div>

answered Jul 23 '13 at 07:35

sheriffderek

8,848
6
43
70

A little snappy there sheriff! – nouveau Jul 23 '13 at 07:50
;-( oops! Totally unintended. I always come off weird. ! but I answer the question, so I hope that shows how much I care. – sheriffderek Jul 23 '13 at 07:55
It's the box-shadows on inner elements that I was pointing out as an example problem. There are plenty of reasons to go with the clear fix besides that. especially when you are reusing styles, it ends up being a set it and forget it sort of thing. See this: http://codepen.io/sheriffderek/pen/JwxAs --- I have a clear-fix on the 3 reused structural classes... then I'm set. – sheriffderek Jul 23 '13 at 08:36
@sheriffderek aaa I see, I personally use `.clear:after {clear: both; content: ' '; display: table;}` but it is not supported in ie8, anyways thanks for the info, time to delete my answer and award you +1 – Mr. Alien Jul 23 '13 at 08:37
1

I thought of another good reason! http://jsfiddle.net/sheriffderek/VsbcB/ -- don't delete your answer!!! That's how we learn this stuff!!! – sheriffderek Jul 23 '13 at 08:41
1

There are great reasons for each. – sheriffderek Jul 23 '13 at 08:43
It's a 2 part question. That is a unique answer to the second question. Why do you think the user is employing line breaks? I think it's because they are learning - and I wouldn't want to encourage the use of line breaks without good reason. I only find them useful to break lines of text, such as an h1 that I want to span three lines and align left. – sheriffderek Jul 23 '13 at 09:04

Patsy Issa · Answer 4 · 2015-02-19T20:30:04.817

0

In your css add a class that has clear:right; like so:

.clearfix {
  clear:right;
}

Now add that class to your 3rd element and the images after it should go to the other line.

CSS: clear documentation on MDN

edited Feb 19 '15 at 20:30

answered Jul 23 '13 at 07:26

Patsy Issa

11,113
4
55
74

score 0 · Answer 5 · answered Jul 23 '13 at 07:26

0

try this

http://jsfiddle.net/HPyXZ/2/

   .thumbnail
{
float: left;
width: 60px;
border: 1px solid #999;
margin: 0 15px 15px 0;
}

.clearboth{
    clear:both;
}

answered Jul 23 '13 at 07:26

Falguni Panchal

8,873
3
27
33

Why "both" instead of left? I don't see any right's to worry about. – sheriffderek Jul 23 '13 at 07:41

Carlo Moretti · Answer 6 · 2013-07-23T07:37:07.447

0

unless you really need to use float attribute, you could use the display attribute to change how divs are positioned in the page flaw like this :

.thumbnail{
    display:inline-block;
    width: 60px;
    border: 1px solid #999;
    margin: 0 15px 15px 0;
}

Personally I prefer this approach to the float one because is more clean (never really liked all those clear and overflow attributes out of nowhere), actually explains what you're doing (i.e. you want them divs to be displayed as same line blocks), doesn't involve float attribute which may be troublesome when positioning other elements.

Demo

edited Jul 23 '13 at 07:37

answered Jul 23 '13 at 07:29

Carlo Moretti

2,213
2
27
41

2

This is nice, however, there will be uncontrollable space on the right - as far as I remember. I don't feel like a jerk when I say that everyone should be using box-sizing and ems instead of pixels now - as I might have a year ago. I've been doing a lot of stuff with inline-block and vertical align middle lately and it has tons of useful scenarios, that's for sure. – sheriffderek Jul 23 '13 at 07:40
1

thanks I never thought 'bout that space on the right... it seems thought you can still use display:inline-block on a wrapper div and continue positioning on its right as in this demo : http://jsfiddle.net/MBQtF/4/ – Carlo Moretti Jul 23 '13 at 07:47
1

Make your browser larger and smaller... The little viewport in the fiddle -- whacky stuff happens. It's not that it doesn't work, but there are uncontrollable things happening - and I just don't think it's really the best way to target things. Leaving the br in there isn't keeping the markup and the style separate. For clean reusable / easily maintainable code - we should look for the most 007 smooth option. – sheriffderek Jul 23 '13 at 07:59
Now, if we needed all of these things to be in a line - and the things were different sizes - so they needed to be vertical-align: middle; - well then we would do that - (but then the space) – sheriffderek Jul 23 '13 at 08:00

score 0 · Answer 7 · answered Jul 23 '13 at 07:50

To resolve your problem there are many ways:

1) Add a class that encloses all thumbanil

<style>
...
.box{ width:300px;}

</style>

<div class="box">
...
</div>

2) Use CSS3 "column-count" but does not work in IE9

<style>
.thumbnail
{
width: 60px;
border: 1px solid #999;
margin: 0 15px 15px 0;
}
.box{column-count: 3;
-webkit-column-count: 3;
-moz-column-count:3;
width: 300px;
}

</style>

Remove the float from thumbnail, and you can chose the number of columns if you have more thumbnail.

3)Use "clear:both"

<style>
.clear{clear:both;}
</style>

<div class="box">
...

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

...
</div>

I hope I was helpful. Bye.

Instead of down voting you, I'll just say that I feel that this is an overcomplicated answer to a very un-described problem. If this was responsive, (which it should be) - this would bring in a whole different style of thinking. + the User is employing px, so we should assume that internet explorer 6+ are important to them. Columns really aren't solving anything that floats cant, unlike long columns of text, where they really start making a ton of sense. What do you think? — sheriffderek, Jul 23 '13 at 08:05

Daniel Peng · Answer 8 · 2013-07-23T08:28:37.503

You can put the first 3 images in a div , then put the second 3 images in another div , css styling for each div with "clear:both",like this:

<style type="text/css">
  .img_wrap{clear:both;}
</style>
<div class="img_wrap">
  <div class="thumbnail"></div>
  <div class="thumbnail"></div>
  <div class="thumbnail"></div>
</div>
<div class="img_wrap">
  <div class="thumbnail"></div>
  <div class="thumbnail"></div>
  <div class="thumbnail"></div>
</div>

I'm green ,hope that can help you !

how to make images show in two lines when use float:left

8 Answers8