Height in different browsers

HTML & CSS
21

Ok. I shall read.

I think it’s the “Shifted left as far as it can go” phrase that’s confusing me. As far as I can see floats and then goes up, to the right and then left and bolts on the end of the nearest float if theres one there.

Why does everything use this phrase “as far left…”?

22

Hi,

As far as I can see floats and then goes up, to the right and then left and bolts on the end of the nearest float if theres one there.

No, you are missing the vital ingredient :slight_smile:

It doesn’t go up anywhere because it is already there. The element before it was floated so its horizontal position is at the right edge of that previous floated element. It doesn’t actually need to go anywhere as it’s already there.

  1. You have an element that is floated left

  2. If you float another element left it will also float left and perform an orderly queue.

  3. If you float more elements left they will all line up in a row until they can’t fit in the row and then they will drop to the next line.

  4. when this float drops to the next line it will float “as far left as it can”. That means for example if float number three was twice as tall as the other floats in the line this new float would snag on that tall floats base (because it protrudes downwards) and would not go back to the beginning of the row.

Here’s an example showing that behaviour.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
ul {
    margin:0;
    padding:0;
    list-style:none;
    width:800px;
}
li {
    float:left;
    width:100px;
    height:100px;
    background:yellow;
    margin:20px;
    border:1px solid #000;
}
li.longer{
    height:150px;
}
</style>
</head>
<body>
</div>
<ul>
    <li>test</li>
    <li class="longer">test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>snagged</li>
    <li>test</li>
    <li>test</li>
</ul>
</body>
</html>

Imagine you are standing in a queue at a bus stop.

Now if someone joins the queue where do they go? (lol -If they go to the front of the queue then you punch them on the nose)

They line up behind you on the same line. They don’t start a new row on there own unless they are getting on a different bus.