CODEWITHSUNDEEP
htmlcsscss-float
Paul Tarjan
Paul Tarjan

Reputation: 50662

Force float to do a whole new line

I have a bunch of float: left elements and some are SLIGHTLY bigger than others. I want the newline to break and have the images float all the way to the left instead of getting stuck on a bigger element.

Here is the page I'm talking about : link

If they are all the same size if works beautifully : link

Thanks! (I'd rather not get into javascript or server side scripting if I don't have to)

Upvotes: 62

Views: 163091

Answers (8)

Elliot B
Elliot B

Reputation: 1

this is how i got what i wanted working. uses the clear:left; inside of div elements. i wanted text next to each image separately. thanks to everyone who added to this thread.

css

.image-float-left {
    float: left;
    margin-right: 10px; /* Add some space between the image and text */
}
div {
    clear:left;
}

body

<div>
    <img src="https://upload.wikimedia.org/wikipedia/en/f/f6/Outer_Wilds_Steam_artwork.jpg" class="image-float-left">
    Outer Wilds<br>
    <br>
    This game knows how to surprize you and give the feeling of exploration and adventure.  Uncovering the secrets of a space.  Makes your brain work real hard to figure out how to explore diffrent areas.  Echos of the Eye (dlc) is fenominal as well.<br>
</div><br>
<br>
<div>
    <img src="nidus-cover.png" class="image-float-left">
    <a href="https://www.kbibwod.com/" target="_blank">Nidus</a><br>
    <br>
    this is the best two player co-op game ive played, hands down.  me and my yonger brother love playing this game, its just so mesmorizing<br>
</div>

Upvotes: 0

Dom
Dom

Reputation: 3126

Add to .icons div {width:160px; height:130px;} will work out very nicely

Hope it will help

Upvotes: 0

codeasaurus
codeasaurus

Reputation: 163

This is an old post and the links are no longer valid but because it came up early in a search I was doing I thought I should comment to help others understand the problem better.

By using float you are asking the browser to arrange your controls automatically. It responds by wrapping when the controls don't fit the width for their specified float arrangement. float:left, float:right or clear:left,clear:right,clear:both.

So if you want to force a bunch of float:left items to float uniformly into one left column then you need to make the browser decide to wrap/unwrap them at the same width. Because you don't want to do any scripting you can wrap all of the controls you want to float together in a single div. You would want to add a new wrapping div with a class like:

.LeftImages{
    float:left;
}

html

<div class="LeftImages">   
  <img...>   
  <img...> 
</div>

This div will automatically adjust to the width of the largest image and all the images will be floated left with the div all the time (no wrapping).

If you still want them to wrap you can give the div a width like width:30% and each of the images the float:left; style. Rather than adjust to the largest image it will vary in size and allow the contained images to wrap.

Upvotes: 0

Alex Gyoshev
Alex Gyoshev

Reputation: 11967

Well, if you really need to use float declarations, you have two options:

  1. Use clear: left on the leftmost items - the con is that you'll have a fixed number of columns
  2. Make the items equal in height - either by script or by hard-coding the height in the CSS

Both of these are limiting, because they work around how floats work. However, you may consider using display: inline-block instead of float, which will achieve the similar layout. You can then adjust their alignment using vertical-align.

Upvotes: 91

optimiertes
optimiertes

Reputation: 4220

Use display:inline-block

You may also find vertical-align: top or vertical-align:middle useful.

Upvotes: 7

David Davepermen Sp&#246;rri
David Davepermen Sp&#246;rri

Reputation: 836

I fixed it by removing float:left, and adding display:inline-block instead. Haven't used it for images, but should work fine, there, too.

Upvotes: 65

Alex
Alex

Reputation: 9429

This is what I did. Seems to work in forcing a new line, but I'm not an html/css guru by any measure.

<p>&nbsp;</p>

Upvotes: 6

Evernoob
Evernoob

Reputation: 5561

You can wrap them in a div and give the div a set width (the width of the widest image + margin maybe?) and then float the divs. Then, set the images to the center of their containing divs. Your margins between images won't be consistent for the differently sized images but it'll lay out much more nicely on the page.

Upvotes: 2

Related Questions