Question

I am beginner to work with css layouts for web and I implemented the following code which fits my purpose.

The fact it is working maybe it doesn’t necessarily mean it is well written.

Is it good structured code and simple?

Can you say me how to improve this code if possible?

Thanks in advance.

Click here for the current implementation.

Few lines of HTML code (see this link for all code).

<div class='container'>

    <div class='listItem'>

        <!-- Column 1 -->
        <div class='col1'> </div>

         <!-- Column 2 -->
        <div class="col2">
            <div class="col2up">
                <div class="author">Author</div>
                <div class="date">Date</div>
            </div>
            <div class="col2down"> 
                <div class="message">message........</div>
            </div>
        </div>

         <!-- Column 3 -->
        <div class="col3">
            <span>Like</span>
            <span>Replay</span>
        </div>

         <!-- Footer -->
        <div class="linedot">&nbsp;</div>

    </div>

</div>    

Few lines of CSS code (see this link for all code):

.container {
    width: 500px;
    height: auto;
    border: 1px dotted #f0f;
}
.listItem {
    margin: 0 auto;
    margin-top: 8px;
    height: 90px;
}
.listItem div.col1 {
    float: left;
    width: 15%;
    border: 1px dotted #000;
    height: 100%;
}
.listItem div.col2 {
    float: left;
    width: 49%;
    height: 100%;
}
..............

Answer 1

I have added improvements to the CSS and HTML, see http://jsfiddle.net/FJhQ7/17/
Also read the comments which I added at the lines where I suggested a change.

Some notes:

1. Do not use   for styling purposes. I have removed   from <div class="linedot">&nbsp;</div>, and added height: 1.2em; to the the .linedot CSS declaration.
2. Do not define style attributes again, which are rightly inherited. These include own declarations, but also browser-inherited definitions, such as text-decoration: none;
3. Do not include selectors which don’t match anything in the production source. Obsolete code = unnecessary usage of network capacity.
4. I have not implemented this suggestion myself, because you might want to implement different dimensions: Do not use relative units (%) when absolute (px) can be used, because relative units require more computing power (thus a slower rendering). You’ve defined a fixed height (90px) and width (500px) for a (sub-)container, but you’re using relative units for the child elements (height:..%). You can easily convert these units yourself.
   Keep in mind: offset height/width = margin + border + padding + height/width