2 Tableless Three-Column Design Questions

R

richardv2

I've set up a three-column tableless site at www.eBookOptions.com. (You
can go there to see what it looks like if you wish.)

Mostly they work as expected except for two things.
My questions... (CSS Code for both below.)

1. Why do I need different "top"s? (leftmenu=135, content=10,
right=135) The tops of these all seem to be 135 pixels from the top of
the page, but I must use "top: 10px;" for the center content column to
work.

2. Left and right stay the same size, and the middle "stretches"
perfectly in all resolutions, EXCEPT there is about a 10px gutter
between the columns. I've tried different numbers and can't get all
three columns to "just touch". What am I doing wrong????

(Comment: I used 1px red, green and blue borders to make it easy to see
and edit. Later I will drop the left and right borders.)

#leftmenu{
border: 1px solid #F00;
padding: 5px;
top: 135px;
position: absolute;
width: 100px;left: 0px;
margin-left: 0px;
margin-right: auto;}
#content{
border: 1px solid #0F0;
padding: 5px;
top: 10px;
position: relative;
margin: 125px 155px 0px 100px;
width: auto;}
#right {
border: 1px solid #00F;
padding: 5px;
top: 135px;
position: absolute;
width: 155px;
right: 0px;
margin-right: 0px;}
 
D

David Graham

richardv2 said:
I've set up a three-column tableless site at www.eBookOptions.com. (You
can go there to see what it looks like if you wish.)

Mostly they work as expected except for two things.
My questions... (CSS Code for both below.)

1. Why do I need different "top"s? (leftmenu=135, content=10,
right=135) The tops of these all seem to be 135 pixels from the top of
the page, but I must use "top: 10px;" for the center content column to
work.

2. Left and right stay the same size, and the middle "stretches"
perfectly in all resolutions, EXCEPT there is about a 10px gutter
between the columns. I've tried different numbers and can't get all
three columns to "just touch". What am I doing wrong????

(Comment: I used 1px red, green and blue borders to make it easy to see
and edit. Later I will drop the left and right borders.)

#leftmenu{
border: 1px solid #F00;
padding: 5px;
top: 135px;
position: absolute;
width: 100px;left: 0px;
margin-left: 0px;
margin-right: auto;}
#content{
border: 1px solid #0F0;
padding: 5px;
top: 10px;
position: relative;
margin: 125px 155px 0px 100px;
width: auto;}
#right {
border: 1px solid #00F;
padding: 5px;
top: 135px;
position: absolute;
width: 155px;
right: 0px;
margin-right: 0px;}
You have a margin of 125 px on the top of the center column, hence another
10px top makes 135px like the other 2 columns
HTH
David
 

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,483
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top