CODEWITHSUNDEEP
csshtml
csharpclipboard
csharpclipboard

Reputation: 11

align 2 divs under eachothers, one fixed and the other has scroll bar

iam trying to place 2 div under eachothers ..

the top div should have a fixed height the bottom div should fill the rest of the page (width=100% height=100%) and also show scrollbar if needed ..

what i have now is :

<div id="wrapper">
<div id="ToolBar" style="width:100%;"></div>
<div id="BookText" dir="rtl" style="overflow:scroll;"></div>
</div>

the problem is:

when i scroll the BookText div, the ToolBar div scrolls too up and becomes invisible ..

i just want the toolbar div to stay fixed above the booktext div ..

any ideas ? thanks in advance

Upvotes: 0

Views: 1542

Answers (2)

cp3
cp3

Reputation: 2139

Try position:fixed; on #ToolBar. I don't think you need overflow:scroll; on #BookText. Use the browser scrollbar for that.

Upvotes: 0

Sotiris
Sotiris

Reputation: 40066

you could use something like the following css:

 html,body,#wrapper {height:100%;margin:0;padding:0;}
 #ToolBar{height:100px;background:red;position:fixed;}
 #BookText {height:100%;overflow:auto;background:blue;padding-top:100px;}

position:fixed of #ToolBar will have it always in the same place even if you scroll.

Demo: http://jsbin.com/irune6

Upvotes: 1

Related Questions