|
|
Posted by David Graham on 01/21/06 11:12
"richardv2" <richardv2@cox.net> wrote in message
news:1137823410.314191.105510@f14g2000cwb.googlegroups.com...
> 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
Navigation:
[Reply to this message]
|