Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why does 'clear:left' also clears right?

I've been struggling to get CSS floating to work (in my head).

Note the following example:

<style type="text/css">
    div.container {
        width:500px;
    }
    div.left {
        float:left;
        clear:left;
    }
    div.right {
        float:right;
    }
</style>
<div class="container">
    <div class="left">leftdata 1</div>
    <div class="left">leftdata 2</div>
    <div class="right">rightdata 1</div>
    <div class="right">rightdata 2</div>
    <div class="right">rightdata 3</div>
    <div class="right">rightdata 4</div>
</div>

This will give the following output:

+--------------------------------------------------------------------+
| leftdata 1                                                         |
| leftdata 2         rightdata 1 rightdata 2 rightdata 3 rightdata 4 |
|                                                                    |
+--------------------------------------------------------------------+

However I was expecting this:

+--------------------------------------------------------------------+
| leftdata 1         rightdata 1 rightdata 2 rightdata 3 rightdata 4 |
| leftdata 2                                                         |
|                                                                    |
+--------------------------------------------------------------------+

Why is clear:left; also clearing right?


My goal:

I want to only add a clear:right; to the DIVs marked with class: right. This should produce the following:

<style type="text/css">
    div.left {float:left;clear:left;}
    div.right {float:right;clear:right;}
</style>
+--------------------------------------------------------------------+
| leftdata 1                                             rightdata 1 |
| leftdata 2                                             rightdata 2 |
|                                                        rightdata 3 |
|                                                        rightdata 4 |
+--------------------------------------------------------------------+
like image 399
Ropstah Avatar asked Jun 24 '09 11:06

Ropstah


People also ask

Why do we use clear both?

The “clear: both” means floating the elements are not allowed to float on both sides. It is used when no need of any element float on the left and right side as related to the specified element and wanted the next element only shown below.

Where does the clear property go?

The clear property is directly related to floats. If the element can fit horizontally in the space next to another element which is floated, it will. Unless you apply clear to that element in the same direction as the float. Then the element will move down below the floated element.

What does the clear property do?

The clear property controls the flow next to floated elements. The clear property specifies what should happen with the element that is next to a floating element.

What happens when we use clear on an element and there is no space left in the container for that element?

The clear Property none - The element is not pushed below left or right floated elements. This is default. left - The element is pushed below left floated elements. right - The element is pushed below right floated elements.


1 Answers

In your first example the rightdata-divs are placed under the left ones because they appear later in the document. Place them first and you get your expected results.

Or you could try something along the lines of:

<style type="text/css">
  div.left {
    float: left;
  }

  div.right {
    float: right;

  }
  div.container {
    width:500px;
    overflow: auto; /* to make sure .container expands vertically */
  }

<div class="container">
  <div class="left">
    <div>leftdata 1</div>
    <div>leftdata 2</div>
  </div>
  <div class="right">
    <div>rightdata 1</div>
    <div>rightdata 2</div>
    <div>rightdata 3</div>
    <div>rightdata 4</div>
  </div>
</div>
like image 115
nnevala Avatar answered Oct 06 '22 22:10

nnevala