CSS overflow:hidden with anchor in page
Page: http://www.serrupro.ca/index.php?option=com_content&view=article&id=5&Itemid=6&lang=fr
Same page but linking to the anchor http://www.serrupro.ca/index.php?option=com_content&view=article&id=5&Itemid=6&lang=fr#opportunites
My left and right sides move up.
So i'm using the -4000 margin and 4000 padding method so that my left side has a white background all the way to the bottom no matter how long/short the right side is.
This left and right side arer within a container that is overflow:hidden;
This is the only thing i can see that could make theses elements disapear. Without it tho my page doesnt work correctly.
what can i do to fix this? Doesnt seem to be a normal behaviour for an anchor.
thanks for the help in advance
#topcontent {
position:开发者_Python百科relative; /* required for ie or 4000px padding/margin visible */
background-color: #231f20;
border-left: 1px solid #231f20;
border-right: 1px solid #231f20;
overflow:hidden;
}
#topcontent .left {
position:relative;
width:703px;
margin-bottom:-4000px;
padding-bottom:4000px;
background:#FFF;
}
#topcontent .right {
width: 245px;
float: right;
margin-bottom:-4000px;
padding-bottom:4000px;
}
Ugh, well I don't exactly have an answer for you - I tend to design my columnar layouts using the background image method, or same colored sidebars. However I did find some documentation on this particular "bug":
http://www.positioniseverything.net/articles/onetruelayout/appendix/equalheightproblems
I honestly don't know of another alternative method besides a javascript solution, which I always try to steer clear of. You would have to do some serious design refactoring for the background-image to even become an option.
Best of luck, and I hope that link helps a bit - they have some workarounds
Fastest solution is to give padding-bottom to the overflow:hidden element. In your case it will be
#topcontent { /* Any element with overflow: hidden property */
padding-bottom: 18px; /* Value in px that will work for you */
}
精彩评论