Stephen68 Posted January 1, 2008 Share Posted January 1, 2008 I'm not sure where I'm making my mistake but I can't seem to get the boxes inside the container to stay at 100%. Here is the css code All code was validated with w3c body { margin: 0; /* zeroes the margins on the body */ padding: 0; /* zeroes the padding on the body ~ Opera carries a default padding and requires this zeroing */ border: 0; /* zeroes off any existing border */ text-align: center; /* Hack to center the wrapper in IE5.x pc */ background-color:#BB7900; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; } /* START OF LAYOUT FOR LITTLECREATIONSPHOTOGRAPHY.COM */ .wrapper { /* This is the block that contains all other blocks */ width:100%; height:100%; position:relative; border:1px solid black; } .top_menu { /* This is the box that will contain the link at the top */ height:80px; width:100%; border-bottom:1px solid white; } .middle_container { /* This is the container box that keeps everything right width and center */ position:relative; width:750px; height:100%; margin:0px auto; z-index:0; border:1px solid white; z-index:1; } .left_content { /* This the the left hand on content box */ position:relative; float:left; height:100%; /*546px;*/ width:160px; text-align:left; padding: 2px 4px 2px 2px; border-right:1px solid white; z-index:2; } .right_content { /* The box that will contain right hand content, company title and picture */ position:relative; height:100%; margin-left:160px; text-align:left; padding:4px 2px 2px 10px; border:1px solid black; } And here is the link that will show you want it looks like right now. http://littlecreationsphotography.com/css/ Thanks for any help that may come my way.. Stephen Quote Link to comment https://forums.phpfreaks.com/topic/84010-solved-box-going-beyond-container/ Share on other sites More sharing options...
sKunKbad Posted January 1, 2008 Share Posted January 1, 2008 stay at 100% of what? height? Quote Link to comment https://forums.phpfreaks.com/topic/84010-solved-box-going-beyond-container/#findComment-427520 Share on other sites More sharing options...
duclet Posted January 1, 2008 Share Posted January 1, 2008 This type of design is not really supported with the current power of CSS (well, at least the browser's support anyways). There are possibly some ways to get around this but in order to actually help you, I would need to either see your design or if you don't have it, provides a detailed explanation of how it is supposed to look it. It is either that or you can go back to using tables. Quote Link to comment https://forums.phpfreaks.com/topic/84010-solved-box-going-beyond-container/#findComment-427617 Share on other sites More sharing options...
SuperBlue Posted January 2, 2008 Share Posted January 2, 2008 Remember you are saying that the left_content must have the height> 100% of containing div. Thats why it is creating "Overflow", since the top_menu has a height of 80px; Be adviced not to mix measurement units, because CSS is not a programming language. You cant say "This container must be have the height of 100% - 80px", therefor design around these problems. Another funny detail i noticed, was that your document title was "Untitled Document", i mean whats the point. It looks like somthing a wanabee WYSIWYG editor put there.. ??? Anyway, i havent looked much at your code, so i can be wrong; But i would like to suggest an alternative, i modified your code to the below. Here comes the HTML: <!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=iso-8859-1" /> <title>Untitled Document</title> <link href="photos.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="top_menu"> <p>This is the Top_menu div, used for logos and banners?</p> </div> <div id="left_content"> <p>This is presumably the Left menu, AKA: left_content</p> </div> <div id="right_content"> <p>This is presumably the primary content, AKA: right_content</p> </div> </div> </body> </html> And here comes the CSS: /* CSS for littlecreationsphotography.com Note: I suggest that EM is used instead of pixel, this layout can easily be changed. Simply define everything in EM instead of pixel, and let the browser/user chose the font-size. Sorry for being lazy :-) */ body { padding: 0; /* zeroes the padding on the body ~ Opera carries a default padding and requires this zeroing */ text-align: center; /* IE dosent understand "margin: 0 auto;" instead it uses text-align. */ background-color:#BB7900; } p { /* Note: padding tend to curse problems, by "pushing" borders and the sort. therefor we just give the text itself some margin, and that way we avoid fighting with the other problem. */ font-family: Arial, Helvetica, sans-serif; font-size:10pt; margin: 5px; } /* START OF LAYOUT FOR LITTLECREATIONSPHOTOGRAPHY.COM */ #wrapper { position:relative; margin: 0 auto; /* normal way to center stuff. Reminder: the format is "margin: top right bottom left;" */ border:1px solid white; width:750px; height:600px; overflow:hidden; /* Needed, since the "padding-top:80px;" on the content divs, otherwhise will "push" the border outside the wrapper in FF. */ } #top_menu { position:absolute; top:0; right:0; height:80px; width:100%; /* Or 750px, in this case i dont care.*/ text-align:left; border-bottom:1px solid white; /* Background-color and z-index, just so that you wont see the border through the top_menu */ background-color:#BB7900; z-index:1; } #left_content { /* One way to do the height, is substract 80px from the final height, this may not be the best way in scratchable layouts. Well i would define most widths and heights using EM, aswell as the font sizes, that would allow to change the font-size. Another way i would do it, (if i used a fixed pixel based layout): I would Define heights on left and right Content in percentage "100%", and then i would either add a "margin-top:80px;" on the content, or "padding-bottom:80px;" on the Content container/divs themself. Be warned, badding tend to curse problems in some siturations. */ position:absolute; top:0px;padding:80px 0 0 0; /* This is needed since the top_menu div takes 80px of our total height, */ left:0; height:100%; width:160px; text-align:left; border-right:1px solid white; } #right_content { position:absolute; top:0px;padding:80px 0 0 0; /* This is needed since the top_menu div takes 80px of our total height, */ right:0; height:100%; width:590px; text-align:left; } It may also be better to use a HTML 4.01 Strict doctype, but thats an entirely different topic. Quote Link to comment https://forums.phpfreaks.com/topic/84010-solved-box-going-beyond-container/#findComment-427735 Share on other sites More sharing options...
Stephen68 Posted January 2, 2008 Author Share Posted January 2, 2008 Thanks for the help, I have learned quite a bit from your code, the reason that the page is untitled.. well I was lazy. I used my text editor to make a quick page that I could use to view the code as I made it. The page that you saw was is by no means going to be used, I was just looking at it on my dev server. Again thanks for the help! Stephen Quote Link to comment https://forums.phpfreaks.com/topic/84010-solved-box-going-beyond-container/#findComment-427795 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.