This is my markup, I need to align gray label under the blue label and keep the number aligned with blue label.
CSS:
body
{
font-family: arial, helvetica, sans-Serif;
}
#talkbacks .noshow
{
clear: both;
display: table; /*padding-left: 14px;*/
line-height: 13px;
width: 439px;
}
#talkbacks ul.top
{
border: solid 1px #fff;
margin: 0 -1px;
}
#talkbacks li
{
width: 100%;
margin-top: 11px;
}
#talkbacks ul
{
clear: both;
}
.n
{
color: #758888;
float: left;
font-size: 12px;
padding-right: 8px;
line-height: 15px;
}
.c
{
/*float: left;*/
width: 400px;
}
.d
{
font-weight: bold;
color: #758888;
font-size: 12px;
line-height: 15px;
margin: 0;
padding: 0;
}
ul
{
list-style-image: none;
list-style-position: outside;
list-style-type: none;
padding-left:0px;
margin-left:0px;
}
a
{
font-size: 12px;
line-height: 15px;
font-weight: bold;
}
a:link, a:visited
{
color: #284D99;
text-decoration: none;
outline: none;
}
a:hover, a:active
{
text-decoration: underline;
}
Markup:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Test</title>
</head>
<body>
<ul>
<li>
<div class="noshow">
<div class="n">
<span id="ctl03_ctl00_ctl00_lblCommentNum">12.</span>
</div>
<div class="c">
<a href="javascript:__doPostBack('ctl03$ctl00$ctl00$LinkButton1','')" id="ctl03_ctl00_ctl00_LinkButton1"
onclick="viewHide(this);return false;">title3</a>
<p class="d">
marc,03/09/2009 12:23:40</p>
</div>
</div>
</li>
</ul>
<ul>
<li>
<div class="noshow">
<div class="n">
<span id="ctl03_ctl01_ctl00_lblCommentNum">12.</span>
</div>
<div class="c">
<a href="javascript:__doPostBack('ctl03$ctl01$ctl00$LinkButton1','')" id="ctl03_ctl01_ctl00_LinkButton1"
onclick="viewHide(this);return false;">blabla</a>
<p class="d">
bob,03/09/2009 12:23:55</p>
</div>
</div>
</li>
</ul> </body>
</html>