Help | Site Map
Connecting Tech Pros Worldwide
Reply
 
LinkBack Thread Tools
  #1  
Old September 2nd, 2008, 08:38 AM
Newbie
 
Join Date: Jun 2007
Posts: 9
Default Problem with the heights

Hello
I got 3 divs – top bottom and middle,
The top have to be always 20px and always on the top
The bottom have to be always 20px and always on the bottom page
The mid will get a scroll if overflow
The page has to kip its 100% not more.

This is my cod – don’t know hot to do it..

Code:
    <style>
.top
{
	width: 100%;
	height: 20px;
	background-color: Gray;
}


.mid
{
	width: 100%;
	background-color: Olive;
	position:relative;
	
	overflow: auto;
}
.botom
{
	width: 100%;
	height: 20px;
	background-color: Teal;
	position: absolute;		
}

    </style>   
       
        <div class="top">
            top
        </div>
        <br />
        <div class="mid">
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
            middle<br />
        </div>  
    <br />   
        <div class="botom">
            bottum
        </div>
thanks
Reply
  #2  
Old September 2nd, 2008, 09:43 AM
Dormilich's Avatar
Expert
 
Join Date: Aug 2008
Location: Leipzig, Germany
Age: 31
Posts: 599
Default

This is why frames were invented in the first place.
To get an element stay where it is you can use position: fixed (not working in IE), plus a padding (or margin) of the underlying element. getting the footer in the right position might be the tricky part, there you should have a look at this thread.
Reply
  #3  
Old September 2nd, 2008, 04:26 PM
David Laakso's Avatar
Expert
 
Join Date: Aug 2008
Location: US
Posts: 302
Default

See this page by Georg Sotun [1]. Note that IE/6 and down need to be in quirksmode or it will fail in those browsers. Maintain the xml declartion
Code:
<?xml version="1.0" encoding="utf-8"?>
above the doctype, as he has done, to put IE/6 and down in quirks-- and you're good to go...
[1] moa_08.html
Reply
  #4  
Old September 3rd, 2008, 07:51 AM
Newbie
 
Join Date: Jun 2007
Posts: 9
Default

thanks all but i will get it by j.s - easier
Reply
Reply

Bookmarks


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are Off
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

What is Bytes?

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over network members.
Post your question now . . .
It's fast and it's free

Popular Articles