PDA

View Full Version : div container doesn't contain most other contents



briligg
Mar 12th, 2010, 12:42 AM
This is a very basic site, and i'm very new.
The css doc has:
#container {
width: 800px;
margin: 0;
padding: 0;
height: 100%;
border: 8px solid #4a4a4a;
}
in order to draw a border around all the contents, but it chops off after the first image, even though there are also two divs that are nested inside it.

The css and html validate. The html is pretty short, so i guess i'll just include it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title> briligg art ponder muse </title>
<link rel="stylesheet" type="text/css" href="css/briligg.css" />
</head>
<body>
<div id="container">
<img src="images/logo260x140.png" alt="briligg" />
<div class="left">
<h3 class="orange">How to not believe stuff</h3>
<h3 class="yellow">Feel good thoughts</h3>
<h3 class="red">Sitting there getting it together</h3>
<h3 class="blue">Legalize drugs</h3>
<h3 class="pink">Initiate teenagers</h3>
<h3 class="green">Reverse gambling</h3>
<h3 class="orange">What if we all hunted?</h3>
<h3 class="purple">Seeing the future</h3>
<h3 class="yellow">Practise failure</h3>
</div>
<div class="right">
<dl class="image_map">
<dd><a class="LINK0" href="gallery.html"></a></dd>
<dd><a class="LINK1" href="http://picasaweb.google.com/briligg/Briligg1#slideshow/5439745352172274610"></a></dd>
<dd><a class="LINK2" href="sketches.html"></a></dd></dl>
</div>
</div>
</body>
</html>

So what's the problem here?

abduraooft
Mar 12th, 2010, 09:30 AM
So what's the problem here?
Try

html, body, * html #container {
height:100%;
}
#container {
min-height:100%;
width: 800px;
margin: 0;
padding: 0;
height: 100%;
border: 8px solid #4a4a4a;
}

mbaker
Mar 12th, 2010, 10:02 AM
Unfortunately you have not provided enough of your code to say. Try the modified version of your code below to see why.

The problem is almost certainly to do with the interaction between your CSS for container and your left and right classes, particularly your left class.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title> briligg art ponder muse </title>
<!--
<link rel="stylesheet" type="text/css" href="css/briligg.css" />
-->
<style type="text/css">
#container {
width: 800px;
margin: 0;
padding: 0;
height: 100%;
border: 8px solid #4a4a4a;
}
</style>
</head>
<body>
<div id="container">
<img src="images/logo260x140.png" width="260" height="140" alt="briligg" />
<div class="left">
<h3 class="orange">How to not believe stuff</h3>
<h3 class="yellow">Feel good thoughts</h3>
<h3 class="red">Sitting there getting it together</h3>
<h3 class="blue">Legalize drugs</h3>
<h3 class="pink">Initiate teenagers</h3>
<h3 class="green">Reverse gambling</h3>
<h3 class="orange">What if we all hunted?</h3>
<h3 class="purple">Seeing the future</h3>
<h3 class="yellow">Practise failure</h3>
</div>
<div class="right">
<dl class="image_map">
<dd><a class="LINK0" href="gallery.html"></a></dd>
<dd><a class="LINK1" href="http://picasaweb.google.com/briligg/Briligg1#slideshow/5439745352172274610"></a></dd>
<dd><a class="LINK2" href="sketches.html"></a></dd></dl>
</div>
</div>
</body>
</html>


If you add the following to the embedded stylesheet you will get something like the problem you report:


.left { float:left; }
.right { float: right; }
div { border: solid 1px red; }


This is due to floated divs effectively being removed from their containing div for the purposes of calculating the required height of the containing div.

Your container has height:100% which on all but the smallest of screens should prevent the problem you report. However it comes with a big proviso. height:100% means 100% of the surrounding element. By default the outermost elements (html and body) don't have intrinsic heights. [I think this varies a bit between browsers.] So height:100% will have no effect unless you have a rule something like:


body, html { height: 100% }

I suggest you play around with an embeded stylesheet until you get it to display the way you want.

briligg
Mar 12th, 2010, 07:47 PM
Before there were replies here, i looked around the forum and found the 'min-height' and 'html, body {height: 100%} solutions. That solved the problem. The page displayed correctly in Chrome.
Then i opened the site in FF and IE and saw the logo was out of position. So i put it in it's own div, 'div.logo {display: block; clear: both;}.
That put the logo in the top left corner, but the old problem returned in all browsers - the container div only wrapped the logo image.
That must be a big hint as to what is causing this problem, but i don't understand it.
I checked here and added the ' * html #container ' to those first declarations, but there was no change.

(I am considering trying to solve the problem by creating the side borders through a simple background image for the body, and then making the current background the background of the container div, and tacking a div on the bottom that creates the bottom border. But i would prefer to understand why this is happening and solve it through better code.)

I appreciate the posts, they do help me understand more.
The site is at www.briligg.com (http://www.briligg.com)
Here is the complete code:


html, body , * html #container{
height: 100%;
background: #5a5a5a url(http://www.briligg.com/images/bkgnd-briligg.png) no-repeat top center;
width: 800px;
font-family: tahoma, arial, sans-serif;
margin: 0 auto;
padding: 0;
}
#container {
width: 790px;
margin: 0;
padding: 0;
min-height: 100%;
border: 8px solid #4a4a4a;
}
div.logo {
display: block;
clear: both;
}
div.right {
float: right;
padding: 250px 20px 20px 20px;
}
div.left {
float: left;
padding: 50px 20px 20px 20px;
}
dl.image_map {display:block; width:160px; height:225px; background:url(http://www.briligg.com/images/gallery.png); position:relative; margin:2px auto 2px auto;}
a.LINK0 {left:0px; top:0px; background:transparent;}
a.LINK0 {display:block; width:160px; height:0; padding-top:74px; overflow:hidden; position:absolute;}
a.LINK0:hover {background:transparent; border:3px dotted red; color:black;}
a.LINK1 {left:0px; top:76px; background:transparent;}
a.LINK1 {display:block; width:160px; height:0; padding-top:74px; overflow:hidden; position:absolute;}
a.LINK1:hover {background:transparent; border:3px dotted #c99e26; color:black;}
a.LINK2 {left:0px; top:150px; background:transparent;}
a.LINK2 {display:block; width:160px; height:0; padding-top:74px; overflow:hidden; position:absolute;}
a.LINK2:hover {background:transparent; border:3px dotted black; color:black;}
h3.purple {
color: #ab70f3;
}
h3.red {
color: #dd564c;
}
h3.yellow {
color: #c0ad11;
}
h3.orange {
color: #e3860d;
}
h3.green {
color: #3bae53;
}
h3.blue {
color: #4498c8;
}
h3.pink {
color: #cd64ae;
}

-------------------------------------------------



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title> briligg art ponder muse </title>
<link rel="stylesheet" type="text/css" href="css/briligg.css" />
</head>
<body>
<div id="container">
<div class="logo">
<img src="images/logo260x140.png" alt="briligg" />
</div>
<div class="left">
<a href="agnosticism.html"><h3 class="orange">How to not believe stuff</h3></a>
<a href="feel-good.html"><h3 class="yellow">Feel good thoughts</h3></a>
<a href="sitting.html"><h3 class="red">Sitting there getting it together</h3></a>
<a href="legalize-drugs.html"><h3 class="blue">Legalize drugs</h3></a>
<h3 class="pink">Initiate teenagers</h3>
<h3 class="green">Reverse gambling</h3>
<h3 class="orange">What if we all hunted?</h3>
<h3 class="purple">Seeing the future</h3>
<h3 class="yellow">Practise failure</h3>
</div>
<div class="right">
<dl class="image_map">
<dd><a class="LINK0" href="gallery.html"></a></dd>
<dd><a class="LINK1" href="http://picasaweb.google.com/briligg/Briligg1#slideshow/5439745352172274610"></a></dd>
<dd><a class="LINK2" href="sketches.html"></a></dd></dl>
</div>
</div>
</body>
</html>

briligg
Mar 17th, 2010, 10:31 PM
man, i've been having a lot of problems posting to this forum.

briligg
Mar 17th, 2010, 10:36 PM
thanks, both of you. i fixed the problem by
*adding html,body {height: 100%;}
*adding #container {min-height: 100%;}
*adding a width to div.left and making its position absolute
*adding a width and height to the right div, which also became an inline style