CODEWITHSUNDEEP
htmlcsstext
Web_Designer
Web_Designer

Reputation: 74620

text on left and right side of element

Using CSS what is the best way to have text on both the right and the left side of an element and be in the same spot vertically?

Thus ending up with the following layout:
enter image description here

The container has a fixed width, so I don't want to use positioning, because I know I don't have to.

Upvotes: 17

Views: 54251

Answers (2)

rolling stone
rolling stone

Reputation: 13016

(1) Add two divs within the element that contain each text string

<div>
    <div class="div1">Left Text</div>
    <div class="div2">Right Text</div>
</div>

(2) Float the two divs next to each other

.div1 {
    float: left;
}

.div2 {
    float:right;
}

(3) Set the text-align properties for the right div (this will ensure that the text is pushed all the way to the right as in your example).

.div2 {
    float:right;
    text-align: right;
}

Upvotes: 24

Jamie Dixon
Jamie Dixon

Reputation: 54011

You can place your two items inside the same container and float them into the right position.

So you might have something like:

<div class="container">
   <div class="item1">Item 1</div>
   <div class="item2">Item 2</div>
</div>

and CSS:

.container{width:500px;}

.item1, item2{width:200px;}
.item1{float:left;}
.item2{float:right;}

Example: http://jsfiddle.net/7Wvhj/1/

Upvotes: 5

Related Questions