CODEWITHSUNDEEP
htmlcss
user2820403
user2820403

Reputation: 1

editing css for content positioning

i am new to web designing, and I want to edit my css file for displaying a content in left and right alignment alternatively, here is my css

 #text-box-3 {
text-align:center;
padding:0px 90px;
line-height:24px;
}

currently it displays all the paragraph in center alignment, but i want it in alternate (i.e 1st paragraph should be in left, 2nd should be in right, and 3rd one should be in left and so on), here is my div tag

<div id="text-box-3">

Upvotes: 0

Views: 72

Answers (5)

Tech Tech
Tech Tech

Reputation: 354

you could give different class names to paragraphs

<p class="right">...</p>
<p class="left">...</p>

and style each class with css.

Upvotes: 0

user2801966
user2801966

Reputation: 468

You can use jquery for this 

$("#text-box-3 p:odd").css("text-align", "right");
$("#text-box-3 p:even").css("text-align", "left");

No need to worry about croos browser compatibility

Upvotes: 0

HC_
HC_

Reputation: 1050

If this is not dynamic, is a simple solution like this what you're looking for? Note that you can combine ID's and Class's to divs to suit your organizational needs.

CSS
----------------------------
#text-box-3 {
    padding:0px 90px 0 0;
    line-height:24px;
}

#text-box-4 {
    //style
}

.text-box-left {
    text-align:left;
}

.text-box-right {
    text-align:right;
}

HTML
------------------------------
<div id="text-box-3" class="text-box-left">
    <!---content--->    
</div>
<div id="text-box-4" class="text-box-right">
    <!---content--->
</div>

Upvotes: 0

uKolka
uKolka

Reputation: 38680

Here is a working example http://jsfiddle.net/EsB9u/. Read about nth-child at http://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child 

<div>
    <p>Lorem ipsum</p>
    <p>Dolor sit amet</p>
    <p>Whatever else</p>
    <p>Something</p>
</div>

div p:nth-child(even) {
    text-align: right;
}

Upvotes: 0

Laurent S.
Laurent S.

Reputation: 6946

Well, with most modern browsers (Internet explorer 9+ and all other browsers), you could achieve this by using :

div:nth-child(odd)  {text-align : right;}
div:nth-child(even) {text-align : left;}

Upvotes: 2

Related Questions