|
-
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;
}
-
Strangely enough the effect I want to achieve (having the image at the top attached to the top of the browser window) only works in explorer but not in firefox or Safari! In these other browsers the white border is still visible at the top covering part of the image!
-
I'm guessing you're using overflow: auto to expand with the floating elements within it? If so, another option you have is to float your container left. That will make it expand, but will remove the centering. Luckily you can get the centering back. Make these changes to container:
Code:
float: left;
margin: 0 50%; /* moves left edge to center */
position: relative;
left: -454px; /* move left edge back half the width, to truly center */
-
Hi,
thank you for this! Now the picture at the top takes the negative margin and is fine, the only thing is that now the page is not centered: it looks like the content tends to go towards the right of the browser window. Do you know how I can get it perfectly in the center?
I uploaded it here
-
I made a mistake the first time around, you have to subtract the half of the full width of the page. In your case that means the width, the left and right padding, and the left and right borders. So, your left position should be more like -478px.
-
Hello,
yes now it is centered but I noticed something quite nasty in Safari and Explorer: there is an horizontal bar! Is it possible that this has got something to do with margin given in percentage? Is there another way to center everything?
Here is the page now
Last edited by tribolium; 11-02-2009 at 04:04 PM.
-
Can someone help?
-
I'm getting an error when I try to see your page...can't help much if we can't see the problem.
-
ops... I apologise...it's here now!
-
Change margin to just margin-left, and reverse what I gave you.
Code:
float: left;
margin-left: -478px;
position: relative;
left: 50%;
-
It doesn't work, Safari and Explorer still sow the horizontal bar: here
-
Actually it does work, you applied similar code to your copyright statement and changed container, but didn't change copyright, which is messing things up. You'll probably also want to add clear: both to the copyright.
-
Yes it works! The copyright was still forcing the browser to have horizontal bars!
Thank you!!
-
Slinky Designs
 Originally Posted by rdoyle720
I'm guessing you're using overflow: auto to expand with the floating elements within it? If so, another option you have is to float your container left. That will make it expand, but will remove the centering. Luckily you can get the centering back. Make these changes to container:
Hi there, just saying thanks very much for this. My div was getting cut off because of overflow: auto. Changed to a float and its all fine now 
Found via google!
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|
Reply With Quote