Sign in to follow this  
Greg K

[web] CSS Positioning

Recommended Posts

I want to use top:0px; bottom:1px; left:0px; right:1px; to size my div. This works great in firefox, but dies in IE. How do I do this? -Greg

Share this post


Link to post
Share on other sites
In IE when you try to set the width/left/right using a combination of left and right it assumes left:0; width:100%; A workaround is to set it to left:0; width:100%; margin-left: something; margin-right: something;

Share this post


Link to post
Share on other sites


<html>
<head>
</head>
<body>

<style>

div.outerBox
{
position:relative;
top:0px;
left:0px;
height:100%;
width:100%;
border-style:solid;
border-width:1px;
margin:0px;
}

div.innerBox
{
position:absolute;
top:0px;
left:0px;
bottom:1px;
right:1px;
border-style:solid;
border-width:1px;
margin:0px;
}
</style>

<div style="width:20em; height:20em;">
<div class="outerBox">
<div class="innerBox"></div>
</div>
</div>

</body>
</html>





This shows what I mean. The inner box is NOT 1px away from the bottom right... (in internet explorer)

Share this post


Link to post
Share on other sites
GrumpyJack:
I am not sure why you want me to set body width/height 100%, that just gives me scroll bars and doesn't change the way my page looks.

Twanvl: Tried that. See innerBox2. That is what you mean, right?

igni: I now have what I think is the correct doctype. Still does not work.


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

<html>
<head>

<style>

body
{
width:100%;
height:100%;
}

div.outerBox
{
position:relative;
top:0px;
left:0px;
height:100%;
width:100%;
border-style:solid;
border-width:1px;
}

div.innerBox
{
position:absolute;
top:0px;
left:0px;
bottom:1px;
right:1px;
border-style:solid;
border-width:1px;

}

div.innerBox2
{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
margin-right:1px;
margin-bottom:1px;
border-style:solid;
border-width:1px;
}

</style>

</head>
<body>

<div style="width:20em; height:20em;">
<div class="outerBox">
<div class="innerBox"></div>
</div>
</div>
<br>
<div style="width:20em; height:20em;">
<div class="outerBox">
<div class="innerBox2"></div>
</div>
</div>



</body>
</html>

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this