Docking Control to Web Browser

Craig G Fraser

Hi, I am creating a ASP.net app and i need to dock a panel to the bottom of the browser window. Does anyone know how this can be done or can someone point me to a article or example to help me. Any help will be greatly appreated. Cheers Craigo

Wyxlwiis

wrap the panel in a div example

.panelDockPos { position:absolute; bottom:0; left:0; } that should do the trick Wyx :cool:

Anonymous

Thats excatly what I needed...thanx very much for your help Wyx. Cheers Craigo

Wyxlwiis

Well here is a little sample of a layout using divs and absolute positioning there is a fixed top area 100% width and 100px height there is a fixed bottom area 100% width and 100px height and a content area resize to browser I know the problem making layouts crossbrowser and I also had to fiddle around the first time but this is all done in CSS width some workarounds. But when you get the hang of it its no big deal. I have swicth to div layout because of the problem with tablelayout showing very differently in various kind of browsers Example The HTML part. ContentDiv form id="Form1" method="post" runat="server">

asd

The Css part. body { margin: 0:0:0:0; overflow:hidden; } .top { left: 0px; position: absolute; top: 0px; height: 100px; background-color: #ff3366; right: 0; z-index: 1; } * .top /*for IE*/ { left: 0px; position: absolute; top: 0px; height: 100px; background-color: #ff3366; width:100%; z-index: 1; } .middle { z-index: 0; right: 0px; background: blue; left:0px; overflow: scroll; bottom: 100px; position: absolute; top: 100px; display:block; } * html .middle /*for IE*/ { border-top: #ffffee 100px solid; z-index: 0; right: 0px; left: 0px; overflow: scroll; width: 100%; border-bottom: #ffffee 100px solid; position: absolute; top: 0px; height: 100%; display:block; } .bottom { right: 0px; left: 0px; bottom: 0px; position: absolute; height: 100px; background-color: #ffff00; z-index: 1; } * .bottom /*for IE*/ { left: 0px; bottom: 0px; position: absolute; height: 100px; background-color: #ffff00; width:100%; z-index: 1; } Hope that set you off in the right direction Wyx