How to add line seperators HTML

[samipk]

how can i align text on left and right of a line separator like the one below?



any help is appreciated

samipk Reviewed by samipk on 31st May 2011. How to add line seperators HTML how can i align text on left and right of a line separator like the one below? http://lulzimg.com/i22/c40e3c.png any help is appreciated Rating: 5

[eXploit]

I think this will help you mate.

http://www.microbion.co.uk/web/vertline.htm

[mRAza]

here is a small example i make in quick for you.

<style type="text/css">
#content{
	width: 400px;
}
#right {
	float: right;
}
#left {
	float:left;
}
</style>

<div id="content">


<div id="right">
Your right content here
</div>


<div id="left">
Left content here
</div>

</div>

basically Div content contains 2 divs (right and left).
you can set there margin etc in style.

[samipk]

i actually read that one but the html version has borders and the css version doesnt show how to align text left and right and also doesnt work

[samipk]

here is a small example i make in quick for you.

<style type="text/css">
#content{
    width: 400px;
}
#right {
    float: right;
}
#left {
    float:left;
}
</style>

<div id="content">


<div id="right">
Your right content here
</div>


<div id="left">
Left content here
</div>

</div>

basically Div content contains 2 divs (right and left).
you can set there margin etc in style.

Expand

thanks for this mate, few questions:
the <style> part will actually come in html or should i add to css???
also how to add seperator line?

[mRAza]

you can add that part in your css or leave in html with style attribute.

For lines you can add borders, here is a quick way but you need to adjust your min-height according to your content. there is some other way you can check here
http://www.webtoolkit.info/css-clearfix.html

Below example will add quick dirty borders

<style type="text/css">
#content{
	width: 400px;
	border-top: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	min-height: 50px;
	padding: 16px;
}
#right {
	float: right;
	border-left: 1px solid #CCC;
	padding: 16px;
}
#left {
	float:left;
	padding: 18px;
}
</style>

<div id="content">
<div id="right">
Your right content here
</div>

<div id="left">
Left content here
</div>
</div>

[sloddl]

with float like someone already explained to you above or:

<div style="text-align:center;">move text to center</div>
<div style="text-align:left;">move text to left</div>
<div style="text-align:right;">move text to right</div>

don't know for what you need it.

[samipk]

you can add that part in your css or leave in html with style attribute.

For lines you can add borders, here is a quick way but you need to adjust your min-height according to your content. there is some other way you can check here
http://www.webtoolkit.info/css-clearfix.html

Below example will add quick dirty borders

<style type="text/css">
#content{
    width: 400px;
    border-top: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
    min-height: 50px;
    padding: 16px;
}
#right {
    float: right;
    border-left: 1px solid #CCC;
    padding: 16px;
}
#left {
    float:left;
    padding: 18px;
}
</style>

<div id="content">
<div id="right">
Your right content here
</div>

<div id="left">
Left content here
</div>
</div>

Expand

well i dont need borders at all , i just need a line seperator inbetween and thats all, the reason is that there is a LOT of code that will be aligned on the left and right on that line and not just simple text so the simple it is the better it is to sort for me

with float like someone already explained to you above or:

<div style="text-align:center;">move text to center</div>
<div style="text-align:left;">move text to left</div>
<div style="text-align:right;">move text to right</div>

don't know for what you need it.

please refer to the pic on top to view what i want, the above code you pasted although pretty good but doesnt show how to put a line separator

am sorry guys but am a beginner so bear with me if you get frustrated

[cvrle77]

What you showed in image, is table, 2 rows, where one edge have color, nothing else.
That is how it's done in the image. It isnt any separator, it's just that cells are white, and one of sides have color

[samipk]

never mind guys, found the solution and it was pretty simple in the end, here it is for those of you who might not know

<div id="left" style="width:50%;float:left;background:green;">left</div> 
<div id="right" style="margin-left:50%;border-left:solid 1px black;background:red;">right</div>