How to Display Data with DIV based layout?

Question

I want to Display this type of Data using Divs and other elements like ul li p span possibly minimum tags.

Note that: There repeatably blocks and Left content is right aligned and Right content is Left aligned.

Please provide good solution for this with minimum code.

Here is the Link what I tried to do with UL-LI

wazdeisgn

Answer 1

<dl>
<dt>user</dt><dd>3234234234234</dd>
<dt>something</dt><dd>3234234234234</dd>
<dt>wharever</dt><dd>3234234234234</dd>
</dl>

dl { float: left; width: 300px; height: auto; margin-bottom: 5px; }
dt { float: left; width: 100px; height: auto; text-align:right; }
dd { float: right; width: 200px; height: auto; text-align:left; }

of course you should have a good "css reset" before, for the default paddings and margins not affect your box model.

Answer 2

First, place the labels in a div or span container, and the values in their own container. Give the labels a class such as "label".

Next, in your css, float the labels left and give them a fixed width. Set the text-align attribute of the label class to "right".

Float the value container left also if you think the values will wrap to the next line; this will stop them from wrapping into the same vertical space as the label. If you do this though, make sure each label also has clear:left applied so that it starts on its own line.