Welcome to Franci's Site

Tutorials > How to code without using tables

Why you would want to code without using tables? Some people say it makes sites load faster. Some say it makes the code look cleaner (certainly not the CSS). Some do it just because it's the new cool thing to do.

Layout:

layout 1

Code:

<div id="container">

<div id="top"><!-- top content goes here such as logo, banner, navigation etc...--></div>

<div id="left"><!-- content on the left hand side goes here--></div>

<div id="main"><!-- content on the web page goes here--></div>

<div id="footer"><!-- copyright info, navigation, payment info etc...--></div>

</div>

CSS:

Assuming the whole site has a width of 800 px and the left hand side is 200 px.

div#container {width: 800px; margin: 0 auto;}

div#top {width: 800px;}

div#left {float: left; width: 200px;}

div#main {float: left; width: 600px;}

div#footer {clear: left; width: 800px;}

Notes:

  1. Use margin: 0 auto; on the container div to center the content. (I noticed recently that in IE if padding or top and bottom margins are added then the content is not centered anymore.)
  2. When you float a div (block) you have to set a width on that block.
  3. You should always "clear" when you don't want things to float anymore or the next block might fall inline (FF) as well if there is room. See the CSS for the footer div. In FF, if the previous div is floated, then the next one goes to its side while in IE it will go underneath.
  4. In the example above I assume this site is centered and has a set width. If the site is not centered then, the container div is not needed.
  5. If you do not set a width on a div, it will take the width of the container it's in, or, if not inside any container, it will go across the screen. (Container meaning another div, with a width set on it.)
  6. A div is as tall as the content inside it unless you want to set a height on it. Setting a height on a div is not something I recommend because if the content changes, such as font sizes, it will spill out, or not show properly. Using min-height will work in FF, but IE will ignore it.
  7. If the left div and the main div do not have the same background color, but you want them to look as if they always have the same height, like two cells in the same row in a table, there are at least two things you can do.

    Let's say that your left div has a gray background and your main div has a white background.

    First thing you can do is add this to the CSS:

    div#main {border-left: 200px solid #CCC;}

    This adds a 200px border on the left hand side the color of the left div.

    Second thing you can do, is have an image 200px wide 1px high in the gray color of the left div and add this to the CSS:

    div#container {background: url(/images/my_gray_background_bar.jpg) 0 0 repeat-y;}