homepage Welcome to WebmasterWorld Guest from 54.227.41.242
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
nagative magin and floats?
zardos




msg:3975578
 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




msg:3975623
 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




msg:3975682
 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