If you want your several <div> to be side by side in your web pages, you can use "float" to force them to line up, for example:
<div class="d1" style="width: 33%; background-color: #FF9999;
float: left;
">
Div 1
</div>
<div class="d2" style="width: 33%; background-color: #99FF99;
float: left;
">
Div 2
</div>
<div class="d3" style="width: 33%; background-color: #9999FF;
float: left;
">
Div 3
</div>
The output will be:
If you want the first two elements "Div 1" and "Div 2" to take one line, you have several options:
Two Elements Float One Line
Adjust Width
Making the first two elements take all width, and the third one will be pushed to the next line. For instance, we can change the first two "width" from 33% into 45% or 48%.
<div class="d1" style="width:
45%
; background-color: #FF9999; float: left;">
Div 1
</div>
<div class="d2" style="width:
48%
; background-color: #99FF99; float: left;">
Div 2
</div>
<div class="d3" style="width: 33%; background-color: #9999FF; float: left;">
Div 3
</div>
The output will be:
Clear Side
Clearing the left-hand side of element "Div 3", it will leave "Div 1" and "Div 2" in the first line.
<div class="d1" style="width: 33%; background-color: #FF9999; float: left;">
Div 1
</div>
<div class="d2" style="width: 33%; background-color: #99FF99; float: left;">
Div 2
</div>
<div class="d3" style="width: 33%; background-color: #9999FF; float: left;
clear: left;
">
Div 3
</div>
The output will be:
One Element Floats to Right
In the following case, only the first element "Line 1" floats to right, and we would like to make it occupying one line exclusively:
<div class="d1" style="width: 33%; background-color: #FF9999;
float: right;
">
Line 1
</div>
<div class="d2" style="width: 33%; background-color: #99FF99;">
Line 2
</div>
<div class="d3" style="width: 33%; background-color: #9999FF;">
Line 3
</div>
This will output:
In such case, you can define "clear: right;" in the style of "Line 2" or using <table> to solve.
Make the Second Element Clear Right Side
Clearing the right-hand side of element "Line 2", it will leave "Line 1" in the first line.
<div class="d1" style="width: 33%; background-color: #FF9999; float: right;">
Line 1
</div>
<div class="d2" style="width: 33%; background-color: #99FF99;
clear: right;
">
Line 2
</div>
<div class="d3" style="width: 33%; background-color: #9999FF;">
Line 3
</div>
The output will be:
Use Table
Making a standalone table to enclose "Line 1".
<table style="width: 100%;">
<tr>
<td>
<div class="d1" style="width: 33%; background-color: #FF9999; float: right;">
Line 1
</div>
</td>
</tr>
</table>
<div class="d2" style="width: 33%; background-color: #99FF99;">
Line 2
</div>
<div class="d3" style="width: 33%; background-color: #9999FF;">
Line 3
</div>
This could be very useful whenever you want the elements taking a line exclusively. The output will be:
|
Line 1
|
Please note that, you have to set the table's width to make it displayed properly.