conflict between overflow: auto; and negative margins
Hello,
I'm struggling a bit with a page I'm doing. I used overflow:auto on a container div and I found out that it works beautifully and it makes life much easier for displaying correctly the different divs in the page. I only have one problem: I would like the #top div to go over the main container div. I put e negative margin of -11px (which is the height of the container top border). The content of the top pushes itself up of 11 pixels but underneath the border!
The negative margin would work perfectly if there wasn't the overflow:auto! How can I make this work without having to give up my beloved overflow?
I uploaded the page here
This is the html code:
PHP 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pure Smile</title>
<link rel="stylesheet" type="text/css" href="ps_style4.css" title="txt_s"/>
</head>
<body>
<!-- beginning of div container-->
<div id="container">
<!--beginning of top div-->
<div id="top">top</div>
<!--end of top div-->
<!--beginning of menu div-->
<div id="menu">menu</div>
<!--end of menu div-->
<!--beginning of div submenu-->
<div id="submenu">submenu</div>
<!--end of div submenu-->
<!--beginning of div right-->
<div id="right">right</p>
</div>
<!--end of div right-->
</div>
<!-- end of div container-->
<!--beginning of div copyright-->
<div id="copyright">copyright</div>
<!--end of div copyright-->
</body>
</html>
And this is the stylesheet:
PHP Code:
@charset "UTF-8";
/* CSS Document */
body {
font-family: Arial, Helvetica, Tahoma;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #00579d;
margin: 0px;
padding: 0px;
background: url(img/rows_out.gif);
}
/* general page elements */
#container {
background-image: url(img/rows_in.gif);
border-left: 11px solid #FFFFFF;
border-top: 11px solid #FFFFFF;
border-right: 11px solid #FFFFFF;
padding: 0px 13px 0px 13px;
width: 907px;
margin: 0 auto;
overflow: auto;
}
/* top */
#top {
background-color: #ff3333;
height: 56px;
margin: -11px 0px 0px 0px;
position: relative;
overflow: visible;
}
/* menu */
#menu {
background-color: #00579d;
height: 50px;
}
/* left */
#submenu {
background-color: #0eee38;
width: 182px;
float: left;
margin: 13px 13px 0px 0px;
}
/* right */
#right {
background-color: #f26713;
width: 710px;
min-height: 448px;
float: right;
margin: 0px 0px 13px 0px;
}
/* bottom */
#copyright {
background-color: #ffffff;
width: 955px;
margin: 0 auto;
}
