CODEWITHSUNDEEP
htmlcss
selytch
selytch

Reputation: 535

Nested DIV do not position correctly

The following code should (?) position #inner1 and #inner2 at the same spot, or shouldn't it?

Anyway, the #inner1 and #inner2 are positioned differently, despite having same parent. How to fix this (position at the same location)?

<html>
<head>
<style>
div {border:1px dotted}
#main {width:800px;height:600px;position:absolute;}
#outer {width:600px; height:400px; position:absolute; top:100px; left:100px}
#inner1 {position:absolute;right;5px;bottom:5px;height:200px;width:200px}
#inner2 {position:absolute;right:5px;bottom:5px;height:200px;width:200px}
</style>
</head>
<body>
<div id=main>
main
<div id=outer>
outer
    <div id=inner1>
    inner1
    </div>
    <div id=inner2>
    inner2
    </div>

</div>
</div>
</body>
</html>

Upvotes: 0

Views: 230

Answers (2)

user386431
user386431

Reputation:

You are using position:absolute for every division where there are two divisions inside outer devision you should be using position:relative;

Upvotes: 0

hellozimi
hellozimi

Reputation: 1878

right;5px; in #inner1

Syntax error. (the semicolon istead of colon)

Upvotes: 1

Related Questions