Need help styling this html and css

HTML & CSS
1

I am having trouble styling the html below to make it display as in the format desired below.




<div id="restinfo">
<label>Name:</label>
<div class="sub">Coloso</div>
<label>Tel:</label>
<div class="sub">978-897-7723'</div>
<label>Address:</label>
<div class="sub">339 main street</div>
<div class="sub">worcester,ma</div>
<div class="sub">01561</div>
</div>

I am looking to make it look like this

—Format desired—

-----Name: Coloso
-------Tel: 978-450-2321
– Address: 2334 sedwick ave.
------------Worcester, ma
------------01561

I Want to say the dashes don’t apply to the desired format, I just put it in there for padding because it would not display like that after posting

help please.

2

Can you modify the HTML to put them in lists?

If not, you could just add classes to the elements and float them (clear the next element) :).

3

Wrap it all in a list (ul/li) >> give each li a different id >> and give each id your desired padding.

4

It seems that going for the ul li is the desired.

Thank you guys.

5

Using a <ul> is not semantically correct. Using <label> for anything other than marking up a label for a form control is not semantically correct. Mixing inline <label> elements with block-level <div> elements is semantically questionable.

Here’s how I’d mark it up,

<dl id="restinfo">
  <dt>Name:</dt>             <dd>Coloso</dd>
  <dt><abbr>Tel</abbr>:</dt> <dd>978-897-7723</dd>
  <dt>Address:</dt>          <dd>339 Main Street
                                 <br>Worcester, <abbr>Ma</abbr>
                                 <br>01561</dd>
</dl>

#restinfo dt {float:left; clear:left; width:6em; text-align:right}
#restinfo dd {margin-left:7em}

Using a definition list is slightly contrived, but nowhere nearly as much as using an unordered list.

6

A definition list would technically be correct, since the term shares a defining relationship with the descriptors.

I believe:

Definition lists can be used to tie together any items that have a direct relationship with each other (name/value sets).