thatshortguy Posted May 7, 2012 Share Posted May 7, 2012 Hey guys! I hope you can help me out with this one. It's driving me insane today! I'm trying to create a WordPress theme for my website (don't worry, this has nothing to do with WordPress and more to do with CSS!) and I'm having trouble trying to keep the main content area going if the sidebar (which is floated right) is longer. Unfortunately the site is on my PC so I can't link to it, but I can show you what I mean: As you can see the main content just stops. Here is my CSS: body, html {height: 100%;}body {margin: 0px;padding: 0px;background-attachment: fixed;background-image: url(images/Middle_texture.jpg);background-repeat: repeat-x;}a, a:link, a:active, a:visited {color: #3066cd;text-decoration: none;}a:hover {text-decoration: underline;}.container {width: 995px;margin-right: auto;margin-left: auto;margin-top: 10px;font-family: Verdana, Geneva, sans-serif;font-size: 9pt;border: 1px solid black;}.header-logo {background-image: url(images/Header-top.png);background-repeat: no-repeat;padding-top: 20px;padding-left: 50px;height: 49px;}.content-body, .menu-bg {background-image: url(images/body-content-bg.png);background-repeat: repeat-y;padding-right: 30px;padding-left: 30px;clear: both;}.content-body {padding-top: 10px;height: 100%;}.header-banner {background-color: #FFF;background-image: url(images/body-content-bg.png);background-repeat: repeat-y;text-align: center;}.main-content {width: 675px;padding-bottom: 5px;height: 100%;}.post-info {height: 60px;margin-bottom: 5px;}.post-info h1 {margin: 0 0 5px 0;}.post-comments {float: right;font-family: Arial, Helvetica, sans-serif;padding-top: 10px;text-align: center;background-image:url(images/comments-bubble-bg.png);background-repeat: no-repeat;height: 54px;width: 78px;}.post-comments a {color: #FFF !important;text-decoration: none;}a.post-title {font-family: Arial, Helvetica, sans-serif;font-size: 14pt;color: #0c48a1 !important;text-decoration: none;}.post-content {border-bottom: 1px dashed #d1d1d1;margin-bottom: 5px;height: 100%;}.side-bar {width: 250px;height: 100%;float: right;}.footer {font-family: Arial, Helvetica, sans-serif;font-size: 9pt;padding-right: 30px;padding-left: 30px;background-image: url(images/footer-bg.png);background-repeat: repeat-y;min-height:100px;clear: both;}.footer h1 {font-size: 12px;color: #5f5f5f;}.footer ul {list-style-type: none;padding: 0;height: 100%;}.footer-about, .footer-nav, .footer-connect, .footer-meta {float: left;width: 200px;height: 110px;overflow: hidden;}.footer-nav, .footer-connect, .footer-meta {border-left: 1px solid #AAA;padding-left: 5px;}.copyright {text-align: center;padding-bottom: 5px;clear: both;}.logo {position: relative;top: -20px;width: 297px;margin-bottom: -20px;}.main-menu {text-align: left;font-size: 12pt;width: 959px;height: 102px;margin-left: -12px;background-image: url(images/koopa-banner.jpg);background-repeat: no-repeat;position: relative;}.main-menu ul {height: 29px;width: 945px;list-style-type: none;margin: 0;position: absolute;left: 0px;bottom: -2px;padding: 0px;}.main-menu li {float: left;padding-left: 5px;}.main-menu li a, .main-menu li a:visited {display: block;width: 100px;height: 29px;line-height: 29px;color: #FFF;text-decoration: none;text-align: center;vertical-align: middle;border-top-left-radius: 5px;border-top-right-radius: 5px;-moz-border-top-left-radius: 5px; /*Support for older Firefox versions */-moz-border-top-right-radius: 5px;-webkit-border-top-left-radius: 5px; /*Support for older Chrome and Safari versions */-webkit-border-top-right-radius: 5px;-o-border-top-left-radius: 5px; /*Support for older Opera versions */-o-border-top-right-radius: 5px;}.main-menu li a:hover {background-image: url(images/main-nav-bg.png);background-repeat: repeat-x;}li.current-menu-item a {background-image: none !important;background-color: #FFF !important;color: #000 !important;} The border is on ".container". If I set ".container" to "height: 100%", it actually shortens but if I leave it, it goes the full height of the screen which is very odd. Anyone have any ideas? 1 Link to comment Share on other sites More sharing options...
Ingolme Posted May 7, 2012 Share Posted May 7, 2012 If these are inside the same container, just set the container's overflow property to "hidden" or "auto" 1 Link to comment Share on other sites More sharing options...
thatshortguy Posted May 7, 2012 Author Share Posted May 7, 2012 I went down that ally, but I do want the content to be seen (without a scrollbar). I added a quick clearfix for now (an empty <div> with "clear:both") after the container that contains both of those items. It works, but it doesn't seem right. Thanks for the suggestion though! I'm open for other ideas, if there are any, or is the quick clearfix the best option? Link to comment Share on other sites More sharing options...
Ingolme Posted May 7, 2012 Share Posted May 7, 2012 There shouldn't be a scrollbar with the overflow property if the height isn't fixed. The overflow property just has strange effects on the document flow and is a good way to extend a container over floated elements without an extra element. 1 Link to comment Share on other sites More sharing options...
dsonesuk Posted May 7, 2012 Share Posted May 7, 2012 Using height:100%; for elements other than html, body will cause those elements height to extent to height of body or browser screen, I should try using min-height: 100%; instead. Link to comment Share on other sites More sharing options...
thatshortguy Posted May 7, 2012 Author Share Posted May 7, 2012 (edited) @Ingolme: Oh I see, I didn't know that. I did it in addition to having "height: 100%", so I got a scrollbar. I will try it without the height spec. @dsonesuk: Ah, always thought 100% meant 100% of its container. That's good to know. I will switch those to min-height instead. Thanks for the replies guys EDIT: It works! Thanks a lot! Edited May 7, 2012 by thatshortguy Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now