Home/ Questions/Q 4115894
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T22:38:27+00:00

I was just playing around with CSS positioning and I have got a few

  • 0

I was just playing around with CSS positioning and I have got a few doubts regarding the the elements being rendered in browsers? Would someone please explain to me why this is?
enter image description here

HTML CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<div style="background:#ccc;height:150px;width:300px;">
parent div
    <div style="background:#ff0;height:50px;position:absolute;">
        child div
    </div>
</div>
</body>
</html>

1.Why is the child div being displayed in-line with the content of the parent div in IE6 but not in Safari?

2.And when I positioned the child div absolute,it lost its width? But if I specify width:inherit it gets its full width back in Safari but not in IE6[i know inherit is not supported in IE].

Thank You

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    1. Absolutely-positioned block-level elements are supposed to live in their own formatting context. Furthermore, since div is a block-level element, the child is supposed to go on a new line instead of inlining with the parent’s content. And of course, one can’t expect IE6 to know all this.

    2. Absolutely-positioned block-level elements do not expand to fit their container if you do not give them a width.

    • 0