Absolute Positioning not exact

Or is it me.

I have a blank HTML page.  I wanted a div that took up 10% of the top of the screen and 100% width.

I then wanted 3 divs below this.  Each div went the rest of the height of the screen so 90% and each are to be 33.3% wide.  Well first thing that is wrong is that when I display this page, each of the 3 div's at 30% are not exactly touching, they're both off slightly.  Also the 3 divs are more wide together then the 100% width bar at the top.  Whats the deal with this?  Do percentages not work well?
cophiAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
ThinkPaperConnect With a Mentor IT ConsultantCommented:
ok.. well it seems to work..

<html>
<body topmargin=0 leftmargin=0 rightmargin=0 bottommargin=0>
<div style="position: absolute; width:100%; height: 20%; z-index: 1; left: 0px; top: 0px; padding: 0px;border-color:red;background-color:brown;" id="1">
<img src="a.JPG">top</div>

<div style="position: absolute; width: 30%; height: 80%; z-index: 2; left: 0px; top: 20%; padding: 0px;background-color:gray;" id="2"><img src="b.jpg">x</div>

<div style="position: absolute; width: 40%; height: 80%; z-index: 3; left: 30%; top: 20%; padding: 0px;" id="3">STUFF</div>

<div style="position: absolute; width: 30%; height: 80%; z-index: 4; left: 70%; top: 20%; padding: 0px;background-color:gray;" id="5"><img src="c.jpg">x</div>

</body>
</html>
0
 
Mark StegglesWeb DeveloperCommented:
Greetings cophi,

What browser are you using?


0
 
cophiAuthor Commented:
IE 6
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
cophiAuthor Commented:
I actually tried FIREFOX and it seemed to work fine on that, any reason why it doesn't work properly on IE 6
0
 
Mark StegglesWeb DeveloperCommented:
Percentages work fine.

I can tell you now that IE6 will add padding if you do not set padding to 0, also make sure you have margins set to 0. Also, remove whitespace from your html as ie6 will play all kinds of tricks if you give it some whitespace.

Regards
0
 
gops1Commented:
use css specific to IE

for ex:

.testCss{
       width:33.3%;
}

/* For IE */
* html .testCss{
         width:40%;
}
0
 
cophiAuthor Commented:
I have code such as.... <div style="position: absolute; width: 100%; height: 10%; z-index: 1; left: 0px; top: 0px; padding: 0px"

It for some reason just won't work right in IE
0
 
Mark StegglesWeb DeveloperCommented:
I wouldnt recommend using positioning for layout. Use floats instead.
0
 
cophiAuthor Commented:
ok well i don't understand floats very well.

how would i create 4 divs using floats.  1 div on the top thats 10% height and 100% wide, and then 3 div's underneath that, equally spread, taking up the rest of the screen?
0
 
ThinkPaperIT ConsultantCommented:
show us your code. it will help see what problems you have.
0
 
cophiAuthor Commented:
<div style="position: absolute; width: 100%; height: 10%; z-index: 1; left: 0px; top: 0px; padding: 0px" id="1">
<img src="a.JPG" height="100%" width="100%"></div>
<div style="position: absolute; width: 30%; height: 90%; z-index: 2; left: 0px; top: 10%; padding: 0px" id="2">
<img src="b.jpg" height="100%" width="100%"></div>
<div style="position: absolute; width: 40%; height: 90%; z-index: 3; left: 30%; top: 10%; padding: 0px" id="3">
STUFF</div>
<div style="position: absolute; width: 30%; height: 90%; z-index: 5; left: 70%; top: 10%; padding: 0px" id="5">
<img src="c.jpg" height="100%" width="100%"></div>

The renders correctly in Firefox not IE
0
 
ThinkPaperIT ConsultantCommented:
put this in the body.. this will fix the first div

<body topmargin=0 leftmargin=0 rightmargin=0>
0
 
ThinkPaperIT ConsultantCommented:
this was the closest i could come to what you're looking for. I put background colors in it so you can see where it is placed. The only issue is the first div, which has a fixed height... I'll try and see if I can make it completely % based.


<html>
<body topmargin=0 leftmargin=0 rightmargin=0 bottommargin=0>
<div style="position: absolute; width:100%; height: 50px; z-index: 1; left: 0px; top: 0px; padding: 0px;border-color:red;background-color:brown;" id="1">
<img src="a.JPG">top</div>

<div style="position: absolute; width: 30%; height: 93%; z-index: 2; left: 0px; top: 50px; padding: 0px;background-color:gray;" id="2"><img src="b.jpg">x</div>

<div style="position: absolute; width: 40%; height: 93%; z-index: 3; left: 30%; top:50px; padding: 0px;" id="3">STUFF</div>

<div style="position: absolute; width: 30%; height: 93%; z-index: 4; left: 70%; top: 50px; padding: 0px;background-color:gray;" id="5"><img src="c.jpg">x</div>

</body>
</html>
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.

All Courses

From novice to tech pro — start learning today.