CODEWITHSUNDEEP
cssalignment
Gab
Gab

Reputation: 1910

CSS - Text align to left and right - multi lines

I'm a beginner in CSS and I don't manage to do what I need.

I want to display some text on the left and on the right on the same line, and then only on the right on a second line.

Here's a JsFiddle :

HtML :

<div class="myDiv">
    <p class="alignleft"> Text on the left.</p>
    <p class="alignright">Text on the right.</p>
    <p class="alignright2">Text on the right 2.</p>
</div>
<div class="myDiv">
    <p class="alignleft"> Text on the left.</p>
    <p class="alignright">Text on the right.</p>
    <p class="alignright2">Text on the right 2.</p>
</div>

CSS :

.myDiv{
    margin: 0 25% 10px 25%; 
    border-style: dashed;
    border-width: 1px;
}

.alignleft {
    float: left;
}

.alignright {
   float: right;
}

The "Text on the right2" should be under "Text on the right".

It should be very simple but like I said I'm a beginner...

Upvotes: 1

Views: 3116

Answers (6)

user1853128
user1853128

Reputation: 1114

Instead of adding any more extra tags in your HMTL, alternate solution for your code.

Just change you css:

.myDiv{
    margin: 0 25% 10px 25%; 
    border-style: dashed;
    border-width: 1px;
    display:inline-block; // Newly added...
}

.alignleft {
    float: left;
}
.alignright {
    float: right;
}

.alignright2 {
    float:right;// Newly added...
}

Demo

Upvotes: 0

NTK88
NTK88

Reputation: 593

Add this to your css:

.alignright2 {
text-align:right;
clear:right;
}

http://jsfiddle.net/R7LA2/16/

Upvotes: 0

Mayank
Mayank

Reputation: 122

Try adding 

.alignright2 {
    display:inline-block;
    margin-left:50%;
}

Fiddle:

You can change the margin according to your text or you need to change your html by surroding right2 paragraph into a div.

Upvotes: 0

Alex Char
Alex Char

Reputation: 33218

Try this:

html

<div class="myDiv">
    <p class="alignleft"> Text on the left.</p>        
    <p class="alignright">Text on the right.</p>
    <div style="clear:left;"></div>
    <p class="alignright2">Text on the right 2.</p>   
    <div style="clear:right;"></div>
</div>
<div class="myDiv">
    <p class="alignleft"> Text on the left.</p>
    <p class="alignright">Text on the right.</p>
    <div style="clear:left;"></div>
    <p class="alignright2">Text on the right 2.</p>
    <div style="clear:right;"></div>
</div>

css

.myDiv{
    margin: 0 25% 10px 25%; 
    border-style: dashed;
    border-width: 1px;"
}

.alignleft {
    float: left;
}
.alignright {
    float: right;
}

.alignright2 {
    float:right;
}

fiddle

Upvotes: 3

Sid M
Sid M

Reputation: 4354

This works fiddle

.alignleft {
    text-align:left;
}
.alignright {
    text-align:right;
}

.alignright2 {
    text-align:right;
}

Upvotes: 4

pavel
pavel

Reputation: 27092

Try this if it works as you need.

.alignright2 {
    float: right;
    clear: right;
}

http://jsfiddle.net/R7LA2/2/

Upvotes: 5

Related Questions