View Full Version : Tableless Design

03-09-2009, 11:55 PM
Few days ago I was trying to build a website with tables but I faced tremendous amount of difficulty while doing that. Some tables began to behave awkwardly and started in different directions. So I would like to build a website in div next time. Could you please help me in this respect.

04-20-2009, 10:49 PM
what would you like to know?

04-24-2009, 12:20 AM
How to design a website using using div sans tables. This is what I want to know in simple English.

05-03-2009, 06:03 PM
Good explanation:
(if you need more basic CSS help, go to http://w3schools.com

Crappy explanation:
<style type="text/css">
body { text-align: center; margin:0;padding:0;** // text-align center is for IE6 to center the wrap column
#wrap { width: 740px; margin: 0 auto; text-align:left;** // setting a width, setting the margin for other browsers so the page is centered, with no top margin
#l { width: 200px; float:left; ** // float left tells the browser to make this the left column..
#r { margin-left: 200px; ** // telling the right column how far to displace itself from the left side.
#footer { clear: both; ** // when columns are floated, the surrounding div doesn't necessarily expand to contain them, this ensures that it does. requires a block-level element.
<div id="wrap">
<div id="l">Left contents</div>
<div id="r">Right contents</div>
<div id="footer">&copy; Copyright 2009</div>

05-06-2009, 12:49 AM
this is what I wanted to know. Thanks a lot for sharing this information. In will try this and I face any problem I will definitely get back to you.

05-11-2009, 07:12 AM
i dont know much about designing part of website ... my brother does have some talent in this field i perform seo work only...

06-22-2009, 05:07 AM
i used to use tables back in th day but once i learned some css i would never go back.

I'll try and give a simple and brief example.


first i wrap the whole content part of the site (ie not the fading background) in a fixed width (800px or whatever) <div>

Then within that i make another <div> for the logo and title, fixed width again.

then you can see its now split into two columns (the flash on the left, the image on the right. This is two <div>s both half width (400px in this case) with the float:left style set.

Then below that we have the same thing again but this time its 4 <div>s with float:left set.

and so on..

hopefully that makes some sense.

Its so much more flexible and less painful than tables when you get the hang of it

07-07-2009, 01:01 AM
i dont know about designing my be other person can do that