some positioning help please

[Steve Greenaway]

http://www.engsoc.org/~macfisto/test/index2.html
http://www.engsoc.org/~macfisto/test/position.css

I'm trying to adapt a 3-column css layout to fit my own purposes. The
original design came from:
http://www.thenoodleincident.com/tutorials/box_lesson/basic4.html

As you can see, my work seems to have gone horribly wrong. I can't
figure out why my #main_content div doesn't fit in between the two side
column divs the same way as the #middle div does in the example.

Additionally, I'm trying to put a footer below the lowest of the 3
columns. Can I position the footer relative to the container div that
I wrapped around those 3 columns?

 

[Richard]

http://www.engsoc.org/~macfisto/test/index2.html
http://www.engsoc.org/~macfisto/test/position.css

I'm trying to adapt a 3-column css layout to fit my own purposes. The
original design came from:
http://www.thenoodleincident.com/tutorials/box_lesson/basic4.html

As you can see, my work seems to have gone horribly wrong. I can't
figure out why my #main_content div doesn't fit in between the two side
column divs the same way as the #middle div does in the example.

Additionally, I'm trying to put a footer below the lowest of the 3
columns. Can I position the footer relative to the container div that
I wrapped around those 3 columns?

To make divisions appear side by side, you must use "float". I don't see a
one anywhere.
You also use position:absolute twice with the same precise points.
Use absolute only if ABSOLUTELY necessary.
In your design, I don't see why you need it.

 

[Toby Inkster]

To make divisions appear side by side, you must use "float".

^^^^
http://groups-beta.google.com/group/alt.html/msg/d4e938ffc307f4ad?dmode=source

 

[Toby Inkster]

http://www.engsoc.org/~macfisto/test/index2.html

As you can see, my work seems to have gone horribly wrong. I can't
figure out why my #main_content div doesn't fit in between the two side
column divs the same way as the #middle div does in the example.

Your margin is set like so:

margin: 205px 0px 205px 0px;

That means 205px top and bottom, 0px left and right. You want it the other
way around:

margin: 0 205px;

Although this seems to work even better:

margin: 15px 205px;

Your footer may never work as intended -- it's a weakness of layouts based
on absolute positioning -- you never really know the heights of all the
columns.

Try putting the footer *inside* your #main_content.

 

[Steve Greenaway]

Kermit the Frog stuck a mic in Toby's face, who said:

Your margin is set like so:

margin: 205px 0px 205px 0px;

That means 205px top and bottom, 0px left and right. You want it the other
way around:

margin: 0 205px;

Oops. Dunno how I messed that up.

Although this seems to work even better:

margin: 15px 205px;

Does it make any real difference to the content if I use 0 margins and just
use padding instead?

Your footer may never work as intended -- it's a weakness of layouts based
on absolute positioning -- you never really know the heights of all the
columns.

Try putting the footer *inside* your #main_content.

This explains why I can never find an example 3-column layout with a
header and a footer... One concern is that the #main_content won't
necessarily be the longest column, it could change during updates. Also,
if I put the footer in the #main_content, won't it only be the width of
that particular column?

I guess wrapping all 3 columns in an absolutely-positioned wrapper won't
help either eh.

I'll keep playing. Thanks.

 

[Steve Greenaway]

Kermit the Frog stuck a mic in Steve's face, who said:

I'll keep playing. Thanks.

Following up to myself. Tacky.
I think another thing I did wrong was mix up the right/wrong numbers
in the IE5 hack. It all looked so simple in the examples!
The latest is at http://www.engsoc.org/~macfisto/test/test.html if
anybody cares.