Skip to content

How to Make Float Elements Occupy One Line Exclusively

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:

Div 1
Div 2
Div 3


If you want the first two elements "Div 1" and "Div 2" to take one line, you have several options:

A. Two Elements Float One Line

1. 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:

Div 1
Div 2
Div 3



2. 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:

Div 1
Div 2
Div 3



B. 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:

Line 1
Line 2
Line 3

In such case, you can define "clear: right;" in the style of "Line 2" or using <table> to solve.

1. 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:

Line 1
Line 2
Line 3

2. 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
Line 2
Line 3

Please note that, you have to set the table's width to make it displayed properly.

Leave a Reply

Your email address will not be published.