CODEWITHSUNDEEP
css
Jigs
Jigs

Reputation: 401

CSS how to align one word left and another word right within the same div?

How to align one word left and another word right within the same div?

Upvotes: 15

Views: 26055

Answers (5)

CM8
CM8

Reputation: 21

Try this:

.left {
      float: left;
}
.right {
       float:right;
}       
<html>
<head>
</head>
<body>
<div class="left">
<p>Lorem ipsum dolor.</p>
</div>
<div class="right">
<p>Lorem ipsum dolor</p>
</div>
</body>
</html>

Upvotes: 2

Robusto
Robusto

Reputation: 31883

Here's what I would do:

    .left {
        text-align: left;
        float: left;
        clear: none;
        width: 50%;
    }
    .right {
        text-align: right;
        float: right;
        clear: none;
        width: 50%;
    }


<div>
    <div class="right">right text</div>
    <div class="left">left text</div>
</div>

And make sure to put the one that appears on the right FIRST in the markup, as above.

Upvotes: 2

g.d.d.c
g.d.d.c

Reputation: 47988

<html>
<head>
<style type="text/css">
  div span.left, div span.right { display:  inline-block; width: 50%; }

  span.left { float: left; }

  span.right {float: right; text-align: right; }
</style>
</head>
<body>
  <div>
    <span class=left>Left Text</span>
    <span class=right>Right Text</span>
  </div>
</body>

Upvotes: 2

Eric
Eric

Reputation: 97581

Solution 1:

HTML:

<div>
    <div class="left">left text</div>
    <div class="right">right text</div>
</div>

CSS:

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

Solution 2:

HTML:

<div>
    <div class="left">left text</div><!-- no space here
 --><div class="right">right text</div>
</div>

CSS:

.left {
    text-align: left;
}
.right {
    text-align: right;
}
.left, .right {
    display: inline-block;
    width: 50%;
}

Upvotes: 21

Schneems
Schneems

Reputation: 15828

Without modifying the html as seen above you can possibly use pseudo-selectors, those these are limited to first-line, first-child, etc. http://www.w3.org/TR/CSS2/selector.html#pseudo-element-selectors.

Aside from that you would need to use javascript to apply formatting to the text after it has rendered. Take a look at this stack-overflow post.

CSS to increase size of first word

Upvotes: 0

Related Questions