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>

No comments: