Divs instead of tables

wolverine01 · **Posts:** 63

hi, im redisigning my website and im gonna be using divs instead of tables, can anyone give some ideas about the code i should be using? thank you.

Amadeus K · **Posts:** 86

Hope this helps you.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title></title>
<style type="text/css">
body, html{height: 100%; text-align: center;}
#upper{
    width:100%;
    height:50px;
    background-color:#ff0000;}
#base{
    width:800px;
    height:420px;
    background-color: #000000;
    margin: auto;}
#navArea{
    width:200px;
    height:420px;
    float:left;
    background-color:#ffff00;}
#content{
    width:600px;
    height:420px;
    float:right;
    background-color:#ff00ff;}
#bottom{
    width:100%;
    height:100px;
    background-color:#00ff00;}
</style>
</head>

<body>
<div id="upper"></div>
<div id="base">
    <div id="navArea"></div>
    <div id="content"></div>
</div>
<div id="bottom"></div>
</body>
</html>

wolverine01 · **Posts:** 63

thanks, thats what i needed.

nazartt · **Posts:** 3

Hi,

I've tried your css layout but it failed in IE6 and Mozilla 5(Firefox 2.0.0.20)
In both IE6 (XP+SP2) and Mozilla5 they look the same like this:

if changed "width:100%;" to "width:800px", then IE6 and Mozilla5 both would look differently and wrongly.

I've ever tried to fully use css layout in one of my project but failed terribly, thus turned
back in using table and css in combination, but table as a lead. Especially in
serious big project.

There is a serious browsers compatible issue with css-layout !

Btw, the front-page of scriptingok.com also can't display properly in IE6.

off1 · **Posts:** 29

Nice challenge you got yourself into! :mrgreen:

I'll take a few minutes to play with your code and help you find a good solution.

Quote:

There is a serious browsers compatible issue with css-layout !

Yes, CSS is the coolest thing, but old browsers compatibility is still a pain in the butt for developers.
Specially with all the people around the world not updating their browsers.

Quote:

Btw, the front-page of scriptingok.com also can't display properly in IE6.

I'll report this issue to edodius, he's the one in charge.

Amadeus K · **Posts:** 86

I'm sorry if this snippet was not totally compatible to your needs, or browser :oops:

. Nevertheless, I modified the width to 800px then added the margin: auto to the style and then it was looking kind of the same, though im not using ie6. If you have an specific issue please let us know!

ebodius · **Posts:** 39

Thanx nazartt! We are working on that.

WE REALLY APPRECIATE OUR USERS' FEEDBACK

off1 · **Posts:** 29

AmadeusK is right, just add:

width: 800px;
margin: 0 auto;

to the upper and bottom DIV's.

You also might want to add

margin: 0;

to your body style.

FORUMS » Client Side » HTML

Divs instead of tables

FORUMS » Client Side » HTML