• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 240
  • Last Modified:

CSS positioning horizontal blocks IE6

i want to split my spreadsheet into three horizontal blocks top, middle and bottom. I want the top to take up 15% of the screen, the middle 80% and the bottom 5%. I also want them to keep these % as the browser window is resized. Ive tried looking at relative , floating etc but havnt been able to work this one out
0
LBGUC04
Asked:
LBGUC04
  • 6
  • 5
1 Solution
 
CCSOFlagCommented:
you will need to use absolute positioning along with percentage heights:

      <div id="Top" style="height: 15%; background-color: #000; position: absolute; top: 0; width: 100%;">
    </div>
      <div id="Middle" style="height: 80%; background-color: #666; position: absolute; top: 15%; width: 100%;">
    </div>
      <div id="Bottom" style="height: 5%; background-color:#CCC; position: absolute; top: 95%; width: 100%;">
    </div>
0
 
CCSOFlagCommented:
although I can't test it in IE6, but it SHOULD work in IE6.  
0
 
LBGUC04Author Commented:
the bars are in the right place but there is no height to them so they dont appear as full color blocks
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
CCSOFlagCommented:
even with the height style set to their corresponding percentages?
0
 
LBGUC04Author Commented:
even with the % ive also just tried adding display: block bu this hasnt sorted it either
0
 
CCSOFlagCommented:
ok well IE6 was retarded when it came to divs.  Try converting it to a table like this:

      <table>
      <tr id="Top" style="height: 15%; background-color: #000; position: absolute; top: 0; width: 100%;">
          <td>
            text on top
        </td>
    </tr>
      <tr id="Middle" style="height: 80%; background-color: #666; position: absolute; top: 15%; width: 100%;">
          <td>
          text in middle
        </td>
    </tr>
      <tr id="Bottom" style="height: 5%; background-color:#CCC; position: absolute; top: 95%; width: 100%;">
          <td>
          text on bottom
        </td>
    </tr>
         </table>
0
 
LBGUC04Author Commented:
The height of the color is only 1 row in thickness is there anyway to get it to fill the whole % of each horizontal line?
0
 
LBGUC04Author Commented:
ive also noticed that when resizing the screen it doesnt keep auto adjust the % very well. its anoying as i had this working in IE7 but i need to have it working on IE6
0
 
CCSOFlagCommented:
try adding min-height: 15%/80%/5% to the corresponding sections.  I feel your pain.  I spent countless hours trying to get stuff to work in IE6, until I was finally able to convince my organization to upgrade to IE7.  :)  
0
 
LBGUC04Author Commented:
Ive tried many different approaches to this now, does anyone else have any ideas on how to get this to work?
0
 
SSupremeCommented:
Try this out:
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<style type="text/css">
* {	margin: 0px; padding: 0px;}  
html, body {height:100%; width:100%}
#page {width:70%; height:100%; margin: 0 auto;}
#top {width:100%; height:15%; background:green;}
#middle {width:100%; height:80%; background:orange;}
#bottom {width:100%; height:5%; background:pink;}
</style>

</head>
<html>
<body>
 <div id="page" >
 <div id="top" >
 
 </div>
 <div id="middle" >
 
 </div>
 <div id="bottom" >
 
 </div>
 </div>
</body>
</html>

Open in new window

0
 
LBGUC04Author Commented:
Many thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 6
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now