Using non-floating <div>s to create page layouts

I need a table layout for a webpage, but since someone decided that we should no longer use <table>s to do it, I'm looking to do it with <div>'s.

As f开发者_如何学编程ar as I know, the standard way to do this is to apply float: left to subsequent <div>s that are supposed to fit on the same row. This tends to break the layout if I'm trying to center the page.

Is there a good way to create a table-based <div> layout without relying on floats? I long for the good old days when I could get a table-based layout done in three minutes using just <table>, <tr> and <td>.

This gives you an idea of what can be done:

<div id="wrapper">

    <div id="logo">
    </div>

    <div id="contact">
    </div>

    <br class="clear" />

    <div class="another">
    </div>

    <div class="another">
    </div>

</div>

CSS

#wrapper {width:600px; margin:0 auto; border:1px solid #000;} 
  // wrapper is a containing div.  margin 0 auto centers it

#logo {margin:0; padding:0; float:left; width:196px; 
    border:1px solid green; height:50px;}
  //get rid of the paddings and margin (same below)
  //as with #contact below, width adds up to 600px -4px for 1px border 
  //on each side 

#contact {margin:0; padding:0; float:left; width:400px; 
    border:1px solid red; height:50px;}

.another {height:100px; border:1px solid blue;}

.clear {clear:both;}
  //used to get content right after floated bits.

http://jsfiddle.net/jasongennaro/p4LpT/1/

Layout with floated elements are widely used and don't break, as long as you properly style them. Usually floated elements are inside a wrapping div that retains their position, then you can move it to move the floated elements on its inside.

You could also use display:inline-block to get a similar result as floated elements, though different.

You could also obtain the same effect of a table using only divs, or whatever element you like, but that doesn't make much sense. If you need tables (example for displaying large quantities of well formatted data) then use them. For layouts, CSS styled divs are much better.

There are plenty of tutorials out there, just search CSS layouts.

Edit

As a last note, you can also let divs behave like a normal table, by using the display:table property on the container element, and display:table-row and display:table-cell on the inner elements acting as rows/columns.

CSS layouts don't break if you create them correctly.

In fact, most major web sites have broken away from table-based layouts more than 5 years ago. Here are some sites that have rock-solid examples of CSS layouts:

http://www.pmob.co.uk/

http://glish.com/css/#tutorials

Here's a site on CSS positioning:

http://www.digital-web.com/extras/positioning_101/css_positioning_example.php

Another site on positioning. Well done. You should be able to create any layout you need from this page alone:

http://www.barelyfitz.com/screencast/html-training/css/positioning/

CSS starter templates:

http://www.mycelly.com/

The methods here have been tested ten thousand different ways with different browsers; most have no issues and look the same in most all of them. Either way, get out of table-based layouts. If for the one reason, search engines just like the raw layout of a CSS-based page more than the encapsulated method of table-based layouts.

And these reasons, too:

http://www.chromaticsites.com/blog/13-reasons-why-css-is-superior-to-tables-in-website-design/

There are a couple of frameworks already out there to help ease you through that transition. Yahoo! (Reset, Base, Fonts, & Grids) and Blueprint are both good ones. They both rely on floats however (I too, do not like the excessive use of floats). One thing I've always disliked about any CSS framework is it's reliance on many CSS classes instead of well formed documents and HTML practices to find elements and produce a layout.

If your user base is strictly all modern browsers (basically the latest) you can also use CSS3 columns, which is similar to doing a table based layout and doesn't have as many headaches as float system.

Your instincts about avoiding floats are actually quite good -- they really aren't meant to be used in the manner many designers are using them. I won't go so far as to call them the modern version of the table tag, but they are getting close.

Anyhow, the technique that we often use is a combination of absolute positioning and margins to drop sized elements around a central, naturally expanding "main content" area. This keeps things from blowing up so badly when things exceed their given size limits or what have you.

You can use <div> tags and then set their CSS to display:table and display:table-cell. The philosophy behind not using actual <table>,<td>,<tr> tags for non-tabular data anymore is to prevent the mixing of content with layout.

Tables existed in HTML for one reason: To display tabular data. But then border="0" made it possible for designers to have a grid upon which to lay out images and text. Still the most dominant means of designing visually rich Web sites, the use of tables is now actually interfering with building a better, more accessible, flexible, and functional Web. Find out where the problems stem from, and learn solutions to create transitional or completely table-less layout.

https://www.hotdesign.com/seybold/