float Archives - Lena Design

How to align the text to the left and text to the right in the same line?

To align the text that some of it aligns to the left and some of it aligns to the right within the same line check the options below:

Option1.

Align the text in HTML using the CSS text-align property and CSS float property.

Add the text to the code:

<!DOCTYPE html>
<html>
<body>

<p style="text-align:left;">
    This text is on the left side.
<span style="float:right;">This text is on the right side.</span>
    </p>

</body>
</html>

Output:

This text is on the left side. This text is on the right side.

Option2

Align the text using HTML and CSS

<!DOCTYPE html>
<html>
    <head>
        <style>
            .right{
    float:right;
}

.left{
    float:left;
}
        </style>
    </head>
<body>

<span class="right">This text is on the right side.</span><span class="left">This text is on the left side.</span>

</body>
</html>

Output:

This text is on the right side.This text is on the left side.

Option3

Create the single row table and add the right float on the second cell:

<!DOCTYPE html>
<html>
    <head>
        <style>
.alignRight {
    float: right;
}
        </style>
    </head>
<body>

<table style="width: 100%;">
  <tr><td>This text is on the left side.</td>
  <td class="alignRight">This text is on the right side.</td></tr>
</table>

</body>
</html>

Output:

This text is on the left side.

This text is on the right side.

Enjoy coding!

Read also:

CSS Float Tutorial

CSS Styling Links

CSS Shadows

The CSS float property defines whether an element should float to the left, or right (or not at all).

Demo:

Syntax:

float: none|left|right;

none (default) – the element will be displayed just where it occurs in the text.

left – the element floats to the left of its container.

right – the element floats to the right of its container.

Note: Elements next to a floating element will flow around it. To avoid this, use the clear property.

Example1:

Let an image float to the right:

<!DOCTYPE html>
<html>
<head>
<style>
img {
  float: right;
}
</style>
</head>
<body>

<p><img src="https://i0.wp.com/lenadesign.org/wp-content/uploads/2021/10/css-clock-animation.jpg?ssl=1&resize=320%2C320" width="auto" height="120";>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. </p>

</body>
</html>

Output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio.

Example2:

Don’t allow floating elements on the left or the right side of a defined <p> element:

<!DOCTYPE html>
<html>
<head>
<style>
img {
  float: left;
}

#clearOne {
  clear: left;
}
</style>
</head>
<body>

<div class="ex-1">
    <h4>with clear:</h4>
<img src="https://i0.wp.com/lenadesign.org/wp-content/uploads/2021/10/css-clock-animation.jpg?ssl=1&resize=320%2C320" width="auto" height="120";>
    
<div id="clearOne" style="font-size: 25px;">This is some text.<br>This is some text.<br>This is some text.<br>This is some text.</div>
    </div>
    <br>
    <div class="ex-2">
    <h4>without clear:</h4>
<img src="https://i0.wp.com/lenadesign.org/wp-content/uploads/2021/10/css-clock-animation.jpg?ssl=1&resize=320%2C320" width="auto" height="120";>
    
<div id="clearTwo" style="font-size: 25px;">This is some text.<br>This is some text.<br>This is some text.<br>This is some text.</div>
    </div>

</body>
</html>

Output:

with clear:

This is some text.
This is some text.
This is some text.
This is some text.

without clear:

This is some text.
This is some text.
This is some text.
This is some text.

Enjoy coding!