why doesnt my CSS container size to fit contents? 1

theotrain · Jan 4, 2006

i cant figure out why this CSS panel wont enlarge vertically to accomodate X number of interior, relatively positioned panels. the thing is theres a bunch of panels inside another one which seems to work as expected, but THAT is in yet another container wich doesnt size to fit everything inside it, it just flows out the bottom like so:

http://216.17.223.174/news/test/sample.html

of course i can size #outerbox to fit everything but i dont know how many items it will need to fit so it must be dynamic.

below is the stripped down page, any help is greatly appreciated.

[tt]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
background-color: #A2C9DB;
margin: 0 auto;
font-family: Arial, Helvetica, sans-serif;
COLOR: #oooooo;
FONT-SIZE: 8.5pt;
line-height: 18px;
text-align: center;
}
#outerbox {
top: 40;
margin: 0 auto;
width: 770px;
height: auto
text-align: left;
position:relative;
background-image: url(sample-background.jpg);
background-repeat: no-repeat;
background-color: #ffoooo;
}
#innerbox {
top: 130;
left:188;
height: auto;
width: 450px;
text-align: left;
position: relative;
}
#itembox {
width: 450px;
margin: 0 0 10px 0;
text-align: left;
top: 0;
left: 0;
position: relative;
}
</style>
</head>
<body>
<div id="outerbox">
<div id="innerbox">
<div id="itembox">
<img src="

http://www.tvacres.com/images/baracus_bosco8a.jpg"

width="224" height="165" /><br />
</div>
<div id="itembox">
<img src="

http://www.tvacres.com/images/baracus_bosco8a.jpg"

width="224" height="165" /><br />
</div>
<div id="itembox">
<img src="

http://www.tvacres.com/images/baracus_bosco8a.jpg"

width="224" height="165" /><br />
</div>
</div>
</div>
</body>
</html>
[/tt]

Vragabond · Jan 4, 2006

There is an awful lot wrong with your code:

1. You have no semi-colon at the end of the height declaration of the #outerbox, which confuses the browser parsing css.
2. You have no units in your positioning, which leaves browsers at selecting their own.
3. You use the same id three times in the page, while ids should be unique. Use class for that.
4. You are not validating your code against any doctype.

All these errors can, but not necessarily do, contribute to the problem.

I believe that the main reason your problem exists is your positioning with top,left. It is a very strange technique and many people do not understand it. It is not part of the element, it just shifts the element off its base for the specified amount. That is why your outerbox is not accomodating -- it would accomodate the box, but the box is shifted somewhere else.

I suggest you position your boxes via margins for better results.

theotrain · Jan 5, 2006

thanks for responding.

yes, the top,left usage seems to be the main culprit. matters were complicated by the fact that in this example i had typed [tt]background-color: #ffoooo;[/tt] using letter O's, not zeros. CSS was choking on that, leaving the background color of #outerbox white, so i wasnt able to see that the offset on top was the same as the amount my content was running off the bottom. even when the container was expanding i couldnt see it happening.

when i use margins though i still get some wierdness which i am working around but i wonder if anyone knows the cause.
[tt]
#innerbox {
margin: 100px 0px 0px 188px;
position: relative;
}
[/tt]
this code does what i expect in IE, but in mozilla it gives me the left margin of 188, but the top margin is zero. i get no space on top between this ID and its container in mozilla. any idea why?

Vragabond · Jan 5, 2006

I do believe you need to read up on this:

http://www.andybudd.com/archives/2003/11/no_margin_for_error/

theotrain · Jan 5, 2006

wow. thats just what i needed to read, thanks.

im a beginner with CSS and have been in that state where i actually expect things to work straightforwardly. isnt that just precious?

thanks again!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

why doesnt my CSS container size to fit contents? 1

theotrain

Programmer

Vragabond

Programmer

theotrain

Programmer

Vragabond

Programmer

theotrain

Programmer

Similar threads

Part and Inventory Search

Sponsor