Three columns that don't overlap

[IncaWarrior]

I'm trying to make a site with three columns that doesn't have any thing overlapping. If the user visits with a smaller browser i would prefer that there be a bottom scrollbar then my page being distorted. I can get everything layed out right (with absolute positioning and such) but two of my div's overlap when you view on a small page.

can anyone help me?

BTW this it not the site in my profile

[MotherNatrsSon]

Post a link to the page then???

MNS

[IncaWarrior]

i don't have the new site, but here's the old site which i started to change some before deciding to start fresh (i took over the site from the previous person who liked dreamweaver)

http://www.strategyplanet.com/populous/home.html

[PeOfEo]

dreamweaver is fine, why would that be an issue? I use it all the time for its intellitext.

[IncaWarrior]

well it doesn't handle DIV's too nicely and he just had tables within tables within tables

[pyro]

Originally posted by IncaWarrior
well it doesn't handle DIV's too nicely and he just had tables within tables within tables Dreamweaver MX 2004 does... :)

[gizmo]

Have a look at http://www.inknoise.com/experimental/layoutomatic.php for a start. I am sure that this has appeared before on this forum with another useful link. I will have a search around

[IncaWarrior]

well i don't have dreamweaver 2004 :(

that's not quite what i want, since i would like to have it stratch to the page as well

[IncaWarrior]

so is it impossible?

is there any way to push things to the right so much that they're off the page?

i figured out how to do it with a table in the DIV:
<div align="right"><table width="1000"><tr><td></td><td align="right">

there must be a better way

[PeOfEo]

Just use div min width and use relative positioning from the left side of the page to right right i guess.

[nkaisare]

<div id="main">...</div>
<div id="leftedge">...</div>
<div id="rightedge">...</div>

#main {margin-left: 150px; width: 700px; padding: 0}
#leftedge {position: absolute; top: 0; left: 0; width: 150px; padding: 0}
#rightedge {position: absolute; top: 0; left: 850px; width: 150px; padding: 0}

If you want padding (and/or borders), use box model hack (http://css-discuss.incutio.com/?page=BoxModelHack):
div#leftedge {position: absolute; top: 0; left: 0; width: 140px; padding: 5px}
div#leftedge {
\width: 150px; /* Feed to IE 5.x */
w\idth: 140px; /* Feed to good browsers */
}

---
<div align="right"><table width="1000"><tr><td></td><td align="right">

Whats that supposed to do? Right-align something? How about:
body {width: 1000px; text-align: right}

[PeOfEo]

just on a side note the align attribute is not even valid html 4.01.

[IncaWarrior]

hmm some of those look good. the right one won't work though because i need it to follow the edge of the screen if it's bigger

[nkaisare]

Originally posted by IncaWarrior
hmm some of those look good. the right one won't work though because i need it to follow the edge of the screen if it's bigger
I presume this is in reply to my post above.

If you want your left and right divs to touch the screen edges, use:
#left{position: absolute; left: 0; top: 0; padding-left: 0; margin-left: 0; width: 150px;}
#right{position: absolute; right: 0; top: 0; padding-left: 0; margin-left: 0; width: 150px;}
#middle{margin: 0 150px}

If you want your layout to be of a certain minimum width, use:
body {min-width: 800px}

Notes:
1. Use box-model hacks to make this work in IE5.
2. min-width is not supported by IE. If you want to support that in IE, and if you want to support v4 browsers, you will have to put in more work. Salia's 3-column layout is a great starting point:
http://www.saila.com/usage/layouts/saila_layout.html

Hope this helps
Niket

[IncaWarrior]

the right div i want to go past the screen edge in cases where the viewer has a very small window

[nkaisare]

Use min-width for the body to get that right.

Use Saila's example to make it work in IE. Else google search for "min-width in IE" or something like that.

[IncaWarrior]

ooh that's just what i've been looking for- woohoo!

[IncaWarrior]

ah i got it!


#right {
position:absolute;
top: 300px;
width:100%;
text-align:right;
}

#rightin {
padding-left: 850px;
}

...
<div id="right">
<div id="rightin">
...
</div
</div>