CODEWITHSUNDEEP
htmlcssalignment
Ian Boyd
Ian Boyd

Reputation: 256741

How to align left and right align multiple lines in HTML?

How do i left and right align text on multiple lines, e.g.:

┌─────────────────────────────────────┐
│ Tums                                 29 │
│ Oxydativedecarboxilization          ATP │
│ appdata      C:\Users\Ian\AppData\Local │
└─────────────────────────────────────┘

e.g.:

enter image description here

Note: A single-line variant of this question has been asked before

Here's a sample of some attempts i've found on SO and elsewhere, and the situations where left+right align was tried:

<!DOCTYPE html>
<HTML>
<HEAD>
<HEAD>
    <TITLE>Home Page</TITLE>
    <STYLE type="text/css">
        .left {
            float: left;
        }
        .right {
            float: right;
        }
    </STYLE>
</HEAD>
<BODY>
    <DIV>
        <P><SPAN class='left'>Tums</SPAN><SPAN class='right'>29</SPAN>
        <P><SPAN class='left'>Oxydativedecarboxilization</SPAN><SPAN class='right'>42</SPAN>
        <P><SPAN class='left'>appdata</SPAN><SPAN class='right'>C:\Users\Ian\AppData\Local</SPAN>
    </DIV>

    <UL>
        <LI class='line1'><P class='left'>Tums<P class='right'>29
        <LI class='line2'><P class='left'>Oxydativedecarboxilization<P class='right'>42
        <LI class='line3'><P class='left'>appdata<P class='right'>C:\Users\Ian\AppData\Local
    </UL>

    <DIV>
        <P class='left'>Tums<P class='right'>29
        <P class='left'>Oxydativedecarboxilization<P class='right'>42
        <P class='left'>appdata<P class='right'>C:\Users\Ian\AppData\Local
    </DIV>
</BODY>
</HTML>

Which renders incorrectly as:

enter image description here

Desired rendering:

enter image description here

Bonus reading

Upvotes: 1

Views: 9445

Answers (6)

Jacob Ensor
Jacob Ensor

Reputation: 335

<UL style="list-style-type: none;">
    <LI class='line1'>Tums<div class='right'>29</div></LI>
    <LI class='line2'>Oxydativedecarboxilization<div class='right'>42</div></LI>
    <LI class='line3'>appdata<div class='right'>C:\Users\Ian\AppData\Local</div></LI>
</UL>

Renders as...
Output of the above

You may also need to change the margins of the UL element.

EDIT: I guess the clear method is a more elegant solution!

Upvotes: 1

Rob
Rob

Reputation: 12872

You just have to clear your floats. http://jsfiddle.net/P7KuB/2/

<div>
<p><span class='left'>Tums</span><span class='right'>29</span></p>
<p><span class='left'>Oxydativedecarboxilization</span><span class='right'>42</span></p>
<p><span class='left'>appdata</span><span class='right'>C:\Users\Ian\AppData\Local</span></p>


.left { float: left; }
.right { float: right; }
p { overflow: hidden; }

Upvotes: 2

thirtydot
thirtydot

Reputation: 228182

See: http://jsfiddle.net/thirtydot/HkybR/2/

HTML:

<div class="info">
    <div>
        <span class="left">Tums</span><span class="right">29</span>
    </div>
    <div>
        <span class="left">Oxydativedecarboxilization</span><span class="right">ATP</span>
    </div>
    <div>
        <span class="left">appdata</span><span class="right">C:\Users\Ian\AppData\Local</span>
    </div>
</div>​

Could probably be more semantic.

CSS:

.info {
    margin: 16px;
    padding: 8px;
    background: #fff;
    float: left;
    font-size: 21px;
    clear: both;
}
.info > div {
    overflow: hidden;
    text-align: right;
}
.info .left {
    float: left;
    padding-right: 10px;
}​

Upvotes: 1

huhu
huhu

Reputation: 199

CSS add 

p, li { overflow:hidden; }

Example : http://jsbin.com/asulih/

Upvotes: 0

Gary
Gary

Reputation: 13912

.wrap { clear:both; }

<DIV>
    <P class="wrap"><SPAN class='left'>Tums</SPAN><SPAN class='right'>29</SPAN>
    <P class="wrap"><SPAN class='left'>Oxydativedecarboxilization</SPAN><SPAN class='right'>42</SPAN>
    <P class="wrap"><SPAN class='left'>appdata</SPAN><SPAN class='right'>C:\Users\Ian\AppData\Local</SPAN>
</DIV>

Upvotes: 1

Jesse Bunch
Jesse Bunch

Reputation: 6679

Your test case was way too complicated. Here is a working multi-line version:

<!DOCTYPE html>
<HTML>
<HEAD>
<HEAD>
    <TITLE>Home Page</TITLE>
    <STYLE type="text/css">
        .left {
            float: left;
        }
        .right {
            float: right;
        }
        .clear {
            clear:both;
        }            
    </STYLE>
</HEAD>
<BODY>
    <DIV>
        <P class="left clear">Left</P>
        <P class="right">Right</P>
        <P class="left clear">Left</P>
        <P class="right">Right</P>
        <P class="left clear">Left</P>
        <P class="right">RightRightRightRightRightRight RightRight RightRight RightRight</P>
    </DIV>
</BODY>
</HTML>​

Upvotes: 0

Related Questions