PDA

View Full Version : center left, center right



bucz
Aug 6th, 2009, 09:54 PM
hello,

i am new here in this forum and new in css. therefore, i have a question (simple, i suppose):

i would like to have two sentences in one line, that first would end just in the middle of the page, and the second one would start just in the middle, regardles of its' length. i have tried


.left {
text-align: right;
margin-right: 50%;
}


and it works only for a left text, if i add right


.right {
text-align: left;
margin-left: 50%;
}


it does not work. exemplary html is:

<span class="left">leftleftleft</span><span class="right">leftleftleft</span>

_Aerospace_Eng_
Aug 6th, 2009, 10:02 PM
You can't add left and/or right margins nor padding on inline elements. Make those paragraphs or divs and you'll get some results.

bucz
Aug 7th, 2009, 10:34 AM
thanks,

i have tried


<html>
<head>
<style type="text/css">
div.left {
text-align: right;
margin-right: 60%;
}
div.right {
text-align: left;
margin-left: 60%;
}

</style>
</head>

<body>
<div class="left">bbb</div><div class="right">bbb</div>
</body>
</html>


but two texts now are not in the same line, but in different paragraphs...

_Aerospace_Eng_
Aug 7th, 2009, 11:24 AM
Now you need to float one to the left and one to the right.

bucz
Aug 7th, 2009, 12:34 PM
thanks,
unfortulately i cannot make it running. still left is over right. if i change margins to 40% it works somehow, but it is not what i want to get


<html>
<head>
<style type="text/css">
.left {
float: right;
margin-right: 51%;
}
.right {
float: left;
margin-left: 51%;
}

</style>
</head>

<body>
<div class="left">lll</div><div class="right">rrr</div>
</body>
</html>

abduraooft
Aug 7th, 2009, 12:45 PM
I think you need something like

<div id="wrapper">

<div class="left">lll</div><div class="right">rrr</div>

</div>
.left {
float: left;
width:50%;
}
.right {

margin-left: 50%;
}
#wrapper div{
border:1px solid #000;
}

PS: Add a suitable DOCTYPE (http://www.alistapart.com/articles/doctype/), if you don't have one right now.

bucz
Aug 9th, 2009, 11:30 AM
hi there

adding just one line more to the .left style


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


is doing the trick. {t}hanks!

bucz
Aug 9th, 2009, 07:28 PM
even a better way:



<div style="float:left; width:50%;">
<div style="float:right; margin-right: 10px;">
aaaaaaaaa
</div>
</div>

<div style="float:left; width:50%;">
<div style="margin-left: 10px;">
bbbbbbbb</div>
</div>

abduraooft
Aug 10th, 2009, 09:09 AM
even a better way: [...] may be, but why to suffer divitis (http://csscreator.com/?q=divitis)?

bucz
Aug 10th, 2009, 10:09 PM
harrr! divits! worse that diarrhea, more deadly than pig flu!



by the way, thanks for the article.