misselka Posted October 4, 2012 Share Posted October 4, 2012 (edited) I have an overflow tag set in body element that is working on one div element, but not the other. Could it be caused by the fact that the second div has a z-index? I've tried placing the overflow directly in the <div id="column3">, which is where the overflow, is happening to no avail. Does anyone see the problem or have any tips? Thanks. I've posted a junk site, so you can see the problem. http://aphoniastudios.com/TestSite/test.html Here's the css: @charset "UTF-8";/* CSS Document */ <style type="text/css">html {height:100%}body {background: #CCC;width: 90%;height: 90%overflow: hidden;}a:link {color:#FFF; text-decoration:none;}a:visited {color:#FFF; text-decoration:none;}a:hover {color:#FFF; text-decoration:underline;}a:active {color:#FFF; text-decoration:underline;}#container {float: left;font-family: Helvetica, Arial, sans-serif;font-size: .7em;text-align: left;height: 100%;width: 100%;padding: 0px;margin: 1px 50px;background-image:url(Images/junk.png);background-size: 100%;background-repeat:no-repeat;}.stretch { width:100%; height:100%;}#column1 {float: left;width: 230px;height: 100%;margin: 0px 4px 0px 49px;color: #FFF;font-size: .9em;overflow: hidden;}#column1 #header {padding-right: 8px;padding-left: 8px;padding-top: 276px;padding-bottom: 16px;}#p {font-size:13px;line-height: 17px;}#column1 #footer {background-color: #E1231E;padding: 8px;box-shadow:0px 3px 5px 0px #333333;margin-right: 5px;color: #FFF;}h1 {display:none}h3 {display:none}#column2 {float: left;width: 0%;height: 100%;color:#4D4D4D;font-size: .75em;}nav {background-color: #999;position: relative;z-index: 2;width: 120px;height: 100px;margin-left: 0px;margin-right: 0px;margin-top: 54px;margin-bottom: 0px;padding: 2px 0px 5px 2px;box-shadow:3px 3px 5px 0px #333333;color: #FFF;}nav ul {margin: 10px;padding: 0px;}nav ul li {color: #FFF;text-decoration: none;list-style-type: none;line-height: 0.6em;font-size: 0.8em;font-style: normal;font-weight: 900;background-position: 0px 0px;}#column3{float:left;margin-top: 54px;margin-bottom: 0px;background-color:#FFF;position: relative;z-index: 1;width: 20%;padding-top: 30px;padding-right: 20px;padding-bottom: 20px;padding-left: 140px;box-shadow:3px 3px 5px 0px #333333;}.aboutlinks {word-spacing: 2px;color: #E1231E;}#column4 {float: right;width: auto;height:100%,padding: 0px;}</style> Edited October 4, 2012 by misselka Link to comment Share on other sites More sharing options...
Ingolme Posted October 4, 2012 Share Posted October 4, 2012 The body's overflow property is being ignored because you forgot a semi-colon after height: 90% 2 Link to comment Share on other sites More sharing options...
misselka Posted October 4, 2012 Author Share Posted October 4, 2012 @FoxyMod - Thanks for your response, but adding the semi-colon didn't change anything. Link to comment Share on other sites More sharing options...
ShadowMage Posted October 4, 2012 Share Posted October 4, 2012 (edited) You're also missing a semicolon in the height:100% for the html tag. I also notice that you have <style> tags in your external stylesheet. Remove those. There's also a comma instead of a semicolon on one of the rules in your very last ruleset (#column4). Edited October 4, 2012 by ShadowMage Link to comment Share on other sites More sharing options...
Ingolme Posted October 4, 2012 Share Posted October 4, 2012 When I viewed the page, the only thing stopping the overflow property from working was the missing semi-colon. I modified the CSS myself to make sure. You're also missing a semicolon in the height:100% for the html tag.The semi-colon isn't required for the last rule, but it's a good practise to put it. Link to comment Share on other sites More sharing options...
ShadowMage Posted October 4, 2012 Share Posted October 4, 2012 The semi-colon isn't required for the last rule, but it's a good practise to put it.Now that you mention it, I do remember that. I'm just so used to putting it in, that I forget it isn't required. Anyway, misselka, if the suggestions aren't working, please update your test site with what you tried so we can see what's going on. Link to comment Share on other sites More sharing options...
misselka Posted October 4, 2012 Author Share Posted October 4, 2012 Thank you both. I did everything that you suggested and am still having the problem. I have updated the test site. Please check it out. Link to comment Share on other sites More sharing options...
Ingolme Posted October 4, 2012 Share Posted October 4, 2012 I see no scrollbars. Try clearing your cache or looking at the page with a different browser. Link to comment Share on other sites More sharing options...
misselka Posted October 4, 2012 Author Share Posted October 4, 2012 I don't see scroll bars either, but column3 (the white box) should be ending at the end of the container (end of the background image). Instead it is extending beyond it. The red footer, on the other hand, is obeying the overflow: hidden tag and ends at the end of the container. Scrolling would be fine too, but when I change overflow to scroll, I don't get the scroll bars. Link to comment Share on other sites More sharing options...
Ingolme Posted October 4, 2012 Share Posted October 4, 2012 You have to set a height or max-height if you don't want the column to extend further. Link to comment Share on other sites More sharing options...
misselka Posted October 4, 2012 Author Share Posted October 4, 2012 (edited) When I add in height, it changes the height of the box, but the text remains extended. Also, I'd prefer to have the height of that column be 100% instead of a fixed height. Either way, it is still extending beyond the parent. I was able to get scroll bars, by adding the overflow:scroll tag to the column3 div. However, overflow:hidden placed in the column3 div still does not work. Edited October 4, 2012 by misselka Link to comment Share on other sites More sharing options...
ShadowMage Posted October 5, 2012 Share Posted October 5, 2012 Well, I'm perplexed...if I set the height of the column3 div to 100% it sets it to 100% of something but certainly not its parent.... I honestly don't know why because all of its ancestors have a height specified. Problems like that usually occur when the body and/or html do not have a specified height, but that isn't the case here. Anyway, when the height issue gets figured out, you can just add overflow: auto to the column3 div and it should give you a scrollbar when necessary. Link to comment Share on other sites More sharing options...
misselka Posted October 5, 2012 Author Share Posted October 5, 2012 Yes, very strange. Well, I guess I'll just have to make it fixed unless someone figures out this paradox. Thanks everyone! Link to comment Share on other sites More sharing options...
Ingolme Posted October 5, 2012 Share Posted October 5, 2012 If you set the height to 100% it will be exactly as tall as the window. This means that if it is not stuck to the top of the window some of it is going to go outside of the bottom. If you won't want the text inside the box to flow outside of it, you use the overflow property to tell it to hide it or put a scrollbar. Link to comment Share on other sites More sharing options...
ShadowMage Posted October 8, 2012 Share Posted October 8, 2012 If you set the height to 100% it will be exactly as tall as the window.That seems to be what's happening but isn't it supposed to be 100% of the parent's height? The window is not the parent of column3. The container div is, which happens to use 100% height (correctly this time) to make it the same height as the body, which is 90% of the html, which is 100% of the window. Link to comment Share on other sites More sharing options...
Ingolme Posted October 8, 2012 Share Posted October 8, 2012 That seems to be what's happening but isn't it supposed to be 100% of the parent's height? The window is not the parent of column3. The container div is, which happens to use 100% height (correctly this time) to make it the same height as the body, which is 90% of the html, which is 100% of the window.Not the parent, but the closest ancestor that has a set height.At the moment the problem is that #column3 element doesn't seem to have a height assigned anywhere. Link to comment Share on other sites More sharing options...
ShadowMage Posted October 8, 2012 Share Posted October 8, 2012 Not the parent, but the closest ancestor that has a set height.The closest ancestor with a set height would still be the container, not window... At the moment the problem is that #column3 element doesn't seem to have a height assigned anywhere.Right. That's the element we're trying to adjust the height of. If the height of column3 is set to 100%, it should be the same height as the #container div, but it isn't. In fact, after looking at it again, just now, it doesn't even match the height of the body, html, or window... I just took another look at it and in fact the height is the same as #container. The padding is what makes it look like it is much larger. Height simply defines the height of the content area of an element, not it's overall height. AFAIK, there is no good fix that will allow the use of relative sizes. At least not for older browsers. The box-sizing property can fix it for newer browsers. 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