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

    AngularJS: with ng-animate & ng-view, how to make a 3D cube rotation effect?

    How do I center and auto-resize this css loader?

    UI Challenge - how to draw “connectors” between elements?

    How to set
  • Backgound color?
  • Chrome (webkit?) not displaying images correctly in a slideshow

    How to target last row in a list with CSS?

    How to make CSS animation jump rather than slide

    How to make this kind of border css? [closed]

    links are showing up on each line, instead of inline

    Is it possible to compress LESS CSS files with htaccess? (and how to?)

    How to apply CSS styles to text only

    CSS/Javascript show image remove x on mouseover/hover

    How to make fixed navbar top like w3school

    Telling LESS CSS how to behave with .active li

    How to apply animation on the list items such that during an instance of time only one list item is visible?

    How to use nested p tags in CSS and Bootstrap boxes?

    Hover on “everything but” aka “spotlight” effect: how to make smooth & easy hover transitions?

    How to differentiate the common css class by using other css class

    CSS Web fonts how to use it with use of @font-face its not working

    How to select text, but not images, in CSS

    how to make row span column content start at the top of the column with css and html

    CSS how to auto adjust width img tag

    How do I center text next to a floating image using css?

    how to center a div in a td cell and a link inside of it ?both vertically and horizontally?

    How to override nth-child

    How to target last 3 elements in a container using CSS :nth-last-child(n)?

    How to hide elements with css using checkboxes: different outputs according to element id or class?

    How to implement this in pure CSS?

    How to change CSS where id=array(index)?

    How can I select my font awesome icons in CSS?