homepage Welcome to WebmasterWorld Guest from 50.16.112.199
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
nagative magin and floats?
zardos

5+ Year Member



 
Msg#: 3975576 posted 1:15 pm on Aug 20, 2009 (gmt 0)

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

10+ Year Member



 
Msg#: 3975576 posted 2:13 pm on Aug 20, 2009 (gmt 0)

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

5+ Year Member



 
Msg#: 3975576 posted 3:04 pm on Aug 20, 2009 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved