how to improve this CSS layout which look like a table [closed]


Tags: css

Problem :

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%;
}
..............


Solution :

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 &nbsp; for styling purposes. I have removed &nbsp; 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

    CSS Howto..

    How can I slide the sidebar out of view and make the content flexbox resize to fill the void?

    How to always show up pure HTML5/CSS modal window without clicking a link which activates it?

    How can I use jQuery to create a csv of all checked checkboxes associated text?

    With css, how to ensure wrap on span boundary?

    how to give style to the selected option in html

    How to scroll .list-group leaving navigation bar at top

    How to ensure three DIV are the same height regardless of content

    How to set Height of a table in a Bootstrap as the value of Width using CSS?

    How to avoid Zalgo text bleeding all over place without totally removing it?

    How the browser identifies the CSS framework? [closed]

    How do I convert HTML to inline CSS in Google AppEngine?

    How do I prevent a child element from inheriting parent element's attached attribute (in notched navigation)?

    How to check if a particular CSS value exists

    What's the best way to show (un/ordered) HTML lists as a top-down tree?

    How to fade loop background images?

    How to divide the content column in to two using css

    How to keep transparent radial background smooth in browsers other than Chrome?

    How to create a border gap illusion

    How should I crop the image at client side using jcrop and upload it?

    What are some Best CSS Practices, Do you Re-use previous CSS? How about Frameworks? [closed]

    How to show html template using inline styles only?

    How to use Less variables in CSS

    How do I give one stylesheet precedence over the other with Rails?

    How to use CSS first-child but excluding text content

    How can I allign select menu with a button on the same line with css bootstrap?

    How to put six divs in two rows

    How to specify a html tag on a LESS CSS nested class?

    How to remove CSS Class in aspx pages source codes using Regex?

    How can I resize an image in an HTML generated word document whilst retaining the aspect ratio?

    how to remove margin or padding of window in javascript/css?