Web Design that taps into the haromny and vision of your dreams.

CSS Table Free Layouts

Creating CSS table free layouts the easy way

Written By on in HTML/CSS

346 words, estimated reading time 2 minutes.

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.

Last updated on: Friday 23rd June 2017

 

Comments
Tiyo Kamtiyono

Tiyo Kamtiyono

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 to Tiyo Kamtiyono
Eric Smith

Eric Smith

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 to Eric Smith

 

Leave a Reply

Your email address will not be published.





If you find something abusive or that does not comply with our terms or guidelines please flag it as inappropriate.

Copyright © 2001-2018 Tim Trott, all rights reserved. Web Design by Azulia Designs

This web page is licensed for your personal, private, non-commercial use only.

Disclaimer, Privacy & LegalSitemapContact Me