Tableless layout. Is it always divs with position:absolute?

T

ThunderMusic

ok, lets say I want a structure that looks like www.yahoo.com

a top bar (title), a left bar (navigation menu), a content pan, a right
bar(actually full of things on yahoo, but I would put publicity) and a
bottom bar (copyrights and such).

I tried to position everything in absolute, but, probably because I'm no
expert with css, I can't seem to make this simple structure work correctly.
Could you give me a little hint please?

thanks

ThunderMusic
 
D

David W

The new Yahoo IS tableless now. Its a bit complicated, but take a look at
the source of the home page - its all there.
 
B

bruce barker \(sqlwork.com\)

div are block elements, so by default they go on seperate lines. to put a
div side by side must be done with a css position command. in general to use
positioning, you need to set absolute heights and widths to divs, so you can
position them correctly. often you want client script to calc offsets based
on screen size.

try;

<html>
<body>
<div
style="background-color:green;position:absolute;left:10;top:10;width:400;height:100;">
top
</div>
<div
style="background-color:red;position:absolute;left:10;top:610;width:400;height:100;">
bottom
</div>
<div>
<div
style="background-color:blue;position:absolute;left:10;top:110;width:100;height:500;">
left
</div>
<div
style="background-color:yellow;position:absolute;left:110;top:110;width:300;height:500;">
right
</div>
</body>
</html>
 
G

Guest

Hello Thunder,

There is a lot of good information on how to do tableless layouts:
http://www.google.com/search?hl=en&q=tableless+layout
http://www.w3.org/2002/03/csslayout-howto (only covers three column layout
but adding the header and the footer aren't difficult)
http://www.positioniseverything.net/piefecta-rigid.html - covers alot of the
gotcha's and has a pointer at the bottom of the page to a script which will
generate layouts for you

A couple of good books:
Bulletproof Web Design
CSS Mastery
Stylin' with CSS
Javascript + CSS + DOM Magic
(The books speak to absolute versus relative positioning as well as fluid
versus static design of pages.)
 
T

ThunderMusic

the third link seems to be exactly what I need, so I'll look at it when I
have time... ;) thanks a lot
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top