Menu
I'm editing the css of a Wordpress theme (twentyten)
This is my HTML structure:
<body>
<div id="wrapper">
<div id="header"></div>
<div id="main">
<div id="filtri_di_ricerca"><img></div>
<div id="container">
<div id="content"></div>
</div>
</div>
<div id="footer"></div>
</div>
</body>
and this is my CSS:
#main {
position:relative;
background:#fff;
overflow:visible;
}
#filtri_di_ricerca img {
position: absolute;
top: -96px
}
#filtri_di_ricerca {
position: absolute;
top: 0;
right: 20px;
width: 250px;
background-color: #E6E6E6;
}
I need to overlap the #main div with the #filtri_di_ricerca div, but when I set overflow:visible on #main his height collapses to zero...
I can still see #container and #content but the background of #main is no more visible... I see #body's background instead.
460
asked Nov 08 '25 11:11
This is caused by how the height of a div is calculated. It all depends on the content, if not set fixed. Due to overflow:visible, the content is not needed to fit in the div. So the div's height is set to zero.
Set some fixed height to the div and it should stay at that height.
152
You need to clear the floats for your #main div.
/* For modern browsers */
#main:before,
#main:after {
content:"";
display:table;
}
#main:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
#main {
zoom:1;
}
Read more on clearfix
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
