Learning never exhausts the mind

By

In a pure CSS based layout, it is often necessary to create a section that resembles a table, i.e. an image on the left and text on the right. Without using tables this can be a little tricky, however with these templates it is as simple as copy & paste.

These templates can be used for either displaying content in a table based layout, or you can use them on the basis of a table-less CSS web design - three columns or two columns with sidebars!

You will probably notice that the column widths do not add up to 100%, this is because of a CSS bug in the way IE renders DIV cells. You can use percentages or fixed width (px / em) for the widths, just make sure they add up to slightly less than the page width otherwise the right-hand column will drop below in IE.

This method for CSS table free layouts was devised way before Bootstrap columns, but I'm leaving it here in case it is useful to someone who doesn't want to use large frameworks.

<h2>Two Columns</h2>  
<div style="float: left; width: 50%;">
    <div style="padding: 5px; border:1px solid #aaa">
      Left Column Content
    </div>
  </div>
  <div style="float: left; width: 49%">
    <div style="padding: 5px; border:1px solid #aaa">
      Right Column Content
    </div>
  </div>
  <div style="clear:both"><span></span></div>
 
<h2>Three Columns</h2>
  <div>
    <div style="float:left; width:32%; border:1px solid #aaa">
      Left Column Content
    </div>
 
    <div style="float:left; width:32%; margin:0 1%; border:1px solid #aaa">
      Center Column Content
    </div>
 
    <div style="float:left; width:33%; border:1px solid #aaa">
      Right Column Content
    </div>
  </div> 
  <div style="clear:both"><span></span></div>

For ease of integration I have used inline styles here, you may wish to convert the inline style to a class or id. You can also change the percentages around to create uneven width columns.

 

Sharing is caring!

If you enjoyed this post, please share it with others. Click one of the social media buttons below to share on Facebook, Twitter, LinkedIn, Pinterest or email to a friend.

2 thoughts on “CSS Table Free Layouts
  • Tiyo Kamtiyono
    12th October 2010 at 12:00 am

    Simple but useful code, I ever sucked in a trouble that my container before the two divs doesn't cover them, finally I know that I forget to give the clear div.

    Thanks a lot  :) 

    Reply
  • 16th June 2010 at 12:00 am

    Can you not to specify the widths of the columns? I'd like the column width adjusted automatically. I've tried the 2 column table free layout with the first column as the side meny and the 2nd column as the contents. With the pure css layout the contents of the 2nd column are pushed to below the contents of the first column when the screen gets small. How do I get around this problem?

    Thanks.

    Reply

Leave a Reply

Fields marked with * are mandatory.

We respect your privacy, and will not make your email public. Hashed email address may be checked against Gravatar service to retrieve avatars. This site uses Akismet to reduce spam. Learn how your comment data is processed.