Menu
I’ve got a page with a floated div. Inside the floated div, I have another div and a table.
I would like for the nested div to appear *on top
Whew!
Here’s my code that I’m working on for testing:
[CODE]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<title>Relative positioning vs floating</title>
<style type=”text/css”>
* {
margin: 0;
padding: 0;
}
body {
margin: 10px;
background-color: pink;
}
.float {
width: 300px;
height: 300px;
overflow: hidden;
background-color: #CCFFFF;
float: left;
padding: 10px;
}
div.float table {
postion: relative;
top: -100px;
width: 100%
background-color: #FFFF00;
display: block;
}
div.relative {
position: relative;
top: 0;
width: 100%;
height: 100px;
overflow: hidden;
background-color: #99CCFF;
text-align: center;
}
</style>
</head>
<body>
<div class=”float”>
<div class=”relative”>
Loading Template…
</div>
<table>
<tr>
<td>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc gravida quam et mauris. Aliquam laoreet lorem non massa. Praesent sed risus. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aenean tortor. Nam sodales eleifend felis. Cras non elit. Vivamus dictum lobortis lectus. Nam bibendum. Etiam tempor interdum mi. Sed consequat sapien nec dolor. Sed adipiscing. Phasellus ut nisi sit amet magna scelerisque dapibus. Duis in mauris.</p>
</td>
</tr>
</table>
</div>
</body>
</html>
I can’t seem to get the nested div on top of the table until I assign it a top: 100px while the table has top: -100px, but this of course puts both of them 100px from the top of the floated div.
Any and all help is appreciated. I think there’s something about relative positioning that I’m not understanding.
? Thank you!