CODEWITHSUNDEEP
css
rpat
rpat

Reputation: 279

Absolute positioned div width/height in IE (all versions)

My knowledge of css is very limited. In a larger context, I need to do something like the following:

Inner div goes inside other divs. I am trying to position the inner div, offset from the browser window and with a size that is certain percentage of the browser window. So I apply the following css to the inner div

.abs_pos {
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    background-color: yellow;
    z-index:1002;
    overflow: auto;
}

This works on Chrome and Firefox. But on IE (all version), the inner div's width becomes a percentage of the immediate outer div and not that of the browser window, while the height appears to be determined based on the content of the inner div.

I have the link here to the sample html file. http://orissaclassifieds.com/pos.html

So how can I make this work? Thanks for your help.

Upvotes: 0

Views: 1804

Answers (3)

tw16
tw16

Reputation: 29605

Your current code should work, but you are using an invalid/incomplete doctype which is sending IE into quirks mode.

For HTML4.01 Transitional it should be:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

However, a much shorter/simpler doctype to use is HTML5's. It will trigger standards mode in all browsers:

<!DOCTYPE HTML>

Upvotes: 2

smepie
smepie

Reputation: 509

excuse me, but i don't understand why you use percentage for every parameter, also width and height inside another div... unless the main container is the body page. In your case i should use pixels, and if the div is placed into another div you can use relative instead of absolute...that is relative to the container where you're into...hope this helps

Upvotes: 0

Ibu
Ibu

Reputation: 43840

You can make it work in all browsers by making the parent div have a css rule:

position:relative;

Upvotes: 0

Related Questions