Showing posts with label align. Show all posts
Showing posts with label align. Show all posts

Tuesday, February 26, 2008

Left and right alignment using single DIV tag

Inorder to align say 2 text elements left and right on the same line using a single DIV tag, we need to

1) use the "style" property of the DIV tag and include "position: relative; text-align: center; " in it. see code below.

<div style="width:80%; height:40px; background-color: #EEEEEE; position: relative; text-align: center; width: 100%;"> </div>



2) for text that needs to be left aligned, again use the "style" property and include "position: absolute;left: 0;" in it. if you need spacing around the text then include the 'padding' attribute so "style" should read "position: absolute;left: 0;padding:10px".
see code below.

<label for="aaa" style="position: absolute;left: 0;padding:10px">some text to left</label>



3) for text that needs to be right aligned, again use the "style" property and include "position: absolute;right: 0;" in it. if you need spacing around the text then include the 'padding' attribute so "style" should read "position: absolute;right: 0;padding:10px".
see code below.

<label for="aaa" style="position: absolute;right: 0;padding:10px">some text to right</label>



Complete code.

<div style="width:80%; height:40px; background-color: #EEEEEE; position: relative; text-align: center; width: 100%;">

<label for="aaa" style="position: absolute;left: 0;padding:10px">some text to left</label>

<label for="aaa" style="position: absolute;right: 0;padding:10px">some text to right</label>

</div>