Forum Moderators: not2easy

Message Too Old, No Replies

CSS horizontal positoning of 3 DIVs

when window size is changed

         

Eric in Tennessee

9:07 pm on Dec 16, 2003 (gmt 0)

10+ Year Member



My layout is a Header that extends the full horizontal length of the page.

And then 3 DIVs side by side -
div#left; div#content; div#right;

When I make the window size smaller the divs overlap. Is there a way to keep them from overlapping?

Here is the code for the 3 divs:

div#left{position: absolute; top: 123px; background: white; width: 19%; margin: 5px 0 0 2.5px; padding: 1px;}
div#left a{display: block; color: rgb(0,0,150); border: 1px solid blue; font: 12px/1.2em Helvetica, Arial, sans-serif; text-align: left; text-decoration: none; padding-left: 1px;}
div#left a:visited{color: gray}
div#left a:hover, a:focus{background-color: rgb(200,200,200); color: blue; border-right: 3px solid white;
border-bottom: 1px dashed white;}
-------------------------

div#content{position: absolute; top: 128px; bottom: 1px; left: 20%; right: 20%; font: 16px Verdana, Helvetica, Arial, sans-serif; background-color: rgb(255,228,196); margin-bottom: 2px;}
div#content a{text-decoration: none; color: rgb(0,0,150); clear: both;}
div#content a:visited{color: rgb(0,0,255);}
div#content a:hover{background: rgb(200,200,200); color: rgb(255,255,255);}
-----------------------------

div#right{position: absolute; top: 123px; left: 80%; background: rgb(255,228,196); width: 19%; margin: 5px 0 0 2.5px; padding: 1px;}
div#right a{display: block; color: blue; border: 1px solid blue; font: bold 12px/1.2em Helvetica, Arial, sans-serif; text-align: right; text-decoration: none; padding-right: 1px;}
div#right a:visited{color: gray}
div#right a:hover, a:focus{background-color: rgb(200,200,200); color: white; border-left: 3px solid white; border-bottom: 1px dashed white;}

Thank you in advance for any help,

eTN

iamlost

2:26 am on Dec 17, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I ran your code quickly with two changes in your "div#content" and it resized fine.

1. Change "right: 20%;" to "width: 60%;"

2. Remove "bottom: 1px;"

left and top and width and height are correct for sizing and positioning..

right and bottom are meaningless as you used them.

Eric in Tennessee

7:01 pm on Dec 17, 2003 (gmt 0)

10+ Year Member



Thanks for the comment Iamlost,

I have figured it out. Thanks again,

Eric