Welcome to WebmasterWorld Guest from 54.160.131.144

Forum Moderators: not2easy

Message Too Old, No Replies

nagative magin and floats?

     

zardos

1:15 pm on Aug 20, 2009 (gmt 0)

5+ Year Member



Hello, how do i fix this problem?

<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]

PSWorx

2:13 pm on Aug 20, 2009 (gmt 0)

10+ Year Member



Cant quite get the jist of what you want exactly here but if your just trying to nest one div inside another as tho it is floated try this possible solution:

<!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>

zardos

3:04 pm on Aug 20, 2009 (gmt 0)

5+ Year Member



Hi, if would be so much easer if i could post a link, but lets try, I have two boxed in a menu, the boxsx has round corners, wo they have 3 floated divs in the top and the bottom. This works fine, but then i want the second box to overlap the first one just a bit. but the floated divs do not overlap. the code above is just a dummy withe the same problem
 

Featured Threads

Hot Threads This Week

Hot Threads This Month