3 replies [Last post]
Franky Four Fingers
Offline
Regular
Last seen: 18 years 15 weeks ago
Timezone: GMT+1
Joined: 2004-03-23
Posts: 17
Points: 0

hi there,

I am facing a prob in my the following layout
---------------------
top div height is 140px
---------------------
| right div
|this div needs to scroll
|
----------------------
bottom div 200 px height
this div needs to stay at the bottom of the screen
------------------------

My problem is the following, i want to set my div#right just between the top and bottom and I want it to scroll because the text in there is too long, but somehow I can't manage to get this done...can someone help me... I tried to do it with setting a height for div#right but than I still have some space between the bottom div and my right div if I change my resolution...or view it a smaller size...
here is my css code:

body {
overflow-x:hidden;
overflow-y:hidden;
margin:0px 0px 0px 0px;
SCROLLBAR-FACE-COLOR: #ffffff;
SCROLLBAR-HIGHLIGHT-COLOR: #cccccc;
SCROLLBAR-SHADOW-COLOR: #999999;
SCROLLBAR-3DLIGHT-COLOR: #666666;
SCROLLBAR-ARROW-COLOR: #000000;
SCROLLBAR-TRACK-COLOR: #999999;
SCROLLBAR-DARKSHADOW-COLOR: #ffffff;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-decoration: none;
text-align:left;

}
#hoofdmenu {
position:absolute;
left:0px;
top:120px;
width:100%;
height:20px;
z-index:2;
visibility: visible;
}


#top{
position:absolute;
left:0px;
top:0px;
width:100%;
height:250px;
z-index:0;
background-image: url(../layoutpics/bovenheader.jpg);
border: 0px none #000000;
visibility: visible;
}

#bottom {
position:absolute;
left:0px;
bottom:0px;
width:100%;
height:250px;
z-index:0;
background-image: url(../layoutpics/bottom.jpg);
border: 0px none #000000;
}

#right {
top:140px;
right:0px;
bottom:140px;
overflow-x:no;
overflow-y:auto;
position:absolute;
border-style:none;
margin-right:0px;
width:450px;
z-index:3;
text-align:left;
padding:10px;
visibility:visible;
}

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 18 years 24 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

help with positioning one div between a header an a footer

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

Fruitcake
Offline
Enthusiast
Perth, Australia
Last seen: 14 years 14 weeks ago
Perth, Australia
Timezone: GMT+8
Joined: 2004-04-12
Posts: 257
Points: 0

help with positioning one div between a header an a footer

Hey they are nice. How did they get the scrollbar in there without a frame? Something i'm missing?

I am Dan, Dan I am.

Franky Four Fingers
Offline
Regular
Last seen: 18 years 15 weeks ago
Timezone: GMT+1
Joined: 2004-03-23
Posts: 17
Points: 0

help with positioning one div between a header an a footer

Somehow i am still not able to manage it...i tried everything...but for one or another reason, it is not possible to set the bottom margin at 140px, or at least, it doesn't apply it, even though i set my position at absolute...

please have a look at it, this is the location of the test page

http://www.xs4all.nl/~gielent/probeerdivs/layout1.htm

and this is my css page

http://www.xs4all.nl/~gielent/probeerdivs/css/begin.css

thanks in advance

regards Franky Four Fingers