css vs. table layout

Forum Moderators: not2easy

Message Too Old, No Replies

css vs. table layout

jackvull

2:37 pm on Mar 16, 2006 (gmt 0)

I have a page where I have distinct menu items down the page.
For example (x is a box on the screen):
X X X
X X
X
X

I can lay these out with the old fashioned table method but this gets very confusing with tables inside tables, etc.
However, I can't see a way of doing the same thing using DIVS. If I use a <div> for each box then I can lay them out using absolute or relative positioning but this won't take into account screen resolution size. If a user with a wider screen views the page, the positioning will be all messed up?!

coopersita

5:51 pm on Mar 16, 2006 (gmt 0)

Not to mention that if you add more content to the divs, they may start to overlap.

You should consider using floats.

Google for floatutorial if you are not familiar with floats for layout.

peco

7:08 pm on Mar 16, 2006 (gmt 0)

I had a play with it and got this:

<body>

<div id="wrapper">
<div id="container">
<div id="topLeft">
top left float<br /> 
</div>
<div id="topCenter">
top center float<br /> 
</div>
<div id="topRight">
top right float<br /> 
</div>
<div id="leftMiddle">
left middle float<br /> 
</div>
<div id="rightMiddle">
right middle float<br /> 
</div>
<div id="bottom">
bottom float<br /> 
</div>
</div>
<div id="footer">
footer float<br /> 
</div>
</div>

</body>
</html>

CSS style.css:

body {
margin: 0px auto;
background-color: #000;
}

#wrapper {
width: 100%;
margin: 0px auto;
}

#container {
width: 100%;
position: relative;
left: 0px;
top: 0px;
}

#topLeft {
width: 33%;
float: left;
border-style: solid;
border-width: 1px;
border-color: #f90;
color: #fff;
clear: left;
}

#topCenter {
width: 33%;
float: left;
border-style: solid;
border-width: 1px;
border-color: #f00;
color: #fff;
clear: none;
}

#topRight {
width: 33%;
float: right;
border-style: solid;
border-width: 1px;
border-color: #cc0;
color: #fff;
clear: right;
}

#leftMiddle {
width: 33%;
float: left;
border-style: solid;
border-width: 1px;
border-color: #00f;
color: #fff;
clear: left;
display: in-line;
}

#rightMiddle {
width: 33%;
float: left;
border-style: solid;
border-width: 1px;
border-color: #d0d;
color: #fff;
clear: right;
}

#bottom {
width: 33%;
float: left;
border-style: solid;
border-width: 1px;
border-color: #fff;
color: #fff;
clear: both;
}

#footer {
width: 33%;
border-style: solid;
border-width: 1px;
border-color: #cc0;
color: #fff;
clear: both;
}

Just for IE in seperate ie.css:

#rightMiddle {
clear: none;
}

Is that what you mean?

Jimmyco

5:58 am on Mar 18, 2006 (gmt 0)

tables should organize content, not hold layout.