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 | | | +--------------------------------------------------------------------+
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 | +--------------------------------------------------------------------+
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.
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.
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.
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.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With