Home/ Questions/Q 348985
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T11:24:57+00:00

This is my markup, I need to align gray label under the blue label

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Swap out the class styles for these particular fixes:

    .n
{
    color: #758888;
    float: left;
    font-size: 12px;
    padding-right: 8px;
    line-height: 15px;
    width:15px;
}

    Added a width to the DIV holding the number. Doesn’t hurt to mark out the width of a floated element. You don’t have to have it if you don’t want to.

    .c
{
    float: left;
    width: 400px;
}

    Uncommented out the float:left; that you had. This will allow the text that you have in this particular DIV float to its left and butt up against the earlier, .n class which is holding the number.

    .noshow
{
    overflow:hidden;
    clear:both;
}

    This is the important part. The first line will keep the child elements inside their parent DIV and not go wild. Otherwise, you’ll see the rest of the document stepping. The second line just makes sure that the DIV will keep on its own line.

    • 0