Forum Moderators: not2easy
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