[SOLVED] Box going beyond container

Stephen68 · 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

sKunKbad · January 1, 2008

stay at 100% of what? height?

duclet · 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.

SuperBlue · 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.

Stephen68 · 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

Sign In

[SOLVED] Box going beyond container

Recommended Posts

Stephen68

Link to comment

Share on other sites

sKunKbad

Link to comment

Share on other sites

duclet

Link to comment

Share on other sites

SuperBlue

Link to comment

Share on other sites

Stephen68

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information