Forum Moderators: not2easy
<snip>
Am trying to overlap the two boxes bot the floates courners dose not follow :(
how do i fix this?
<div>
<div id="top" style="height:200px; width:200px;">
<div id="top_container" style="background:#00C;">
<div style="float:left;">left </div>
<div style="float:right;">right</div>
<div style="float:right;">Center </div>
<div style="clear:both;"></div>
</div>
<div id="content" style="background:#00C; height:190px;">
<br />
<br />
content
<br />
<br />
</div>
<div id="Botten_container" style="background:#00C;">
<div style="float:left;">left </div>
<div style="float:right;">right</div>
<div style="float:right;">Center </div>
<div style="clear:both;"></div>
</div>
</div>
<div id="under" style="margin-top:-30px; margin-left:30px; height:200px; width:200px;">
<div id="top_container" style="background:#996;">
<div style="float:left;">left </div>
<div style="float:right;">right</div>
<div style="float:right;">Center </div>
<div style="clear:both;"></div>
</div>
<div id="content" style="background:#996; height:190px;">
<br />
<br />
content
<br />
<br />
</div>
<div id="Botten_container" style="background:#996;">
<div style="float:left;">left </div>
<div style="float:right;">right</div>
<div style="float:right;">Center </div>
<div style="clear:both;"></div>
</div>
</div>
</div>[edited by: swa66 at 2:01 pm (utc) on Aug. 20, 2009]
[edit reason] No links, please see ToS and Forum Charter [/edit]
<!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></title>
<style type="text/css">
/*<![CDATA[*/
#overlapContainer {
position: relative;
display: block;
width: 100px;
height: 100px;
border: solid 1px red;
background-color: silver;
z-index: 0;
overflow: visible;
}
#overlappingContainer {
font-family: Verdana;
font-size: 9px;
text-align: center;
position: absolute;
display: block;
float: left;
margin-left: 10px;
margin-top: 10px;
padding-left: 3px;
padding-right: 3px;
width: 96px;
height: 100px;
border: solid 1px blue;
background-color: orange;
z-index: 0;
}
/*]]>*/
</style>
</head>
<body>
<div id="overlapContainer">
<div id="overlappingContainer">
<b>102x102px boxes:</b><br />
Remember to account for paddings and borders when settings heights and widths in your css.
</div>
</div>
</body>
</html>
