CSS - Managing Height Of Container Div

Thanks for taking the time to read my question.

I have posted what I'm working on at
http://www.scopicdesigns.com/ZoneAll/NewIndex.htm

I have put a yellow background on the main nav container to illustrate my problem.

There seems to be extra height to the .NavContainer in IE6, but it is not there in IE7 or FF. I've tried adjusting all my margins and paddings, but nothing seems to work. I also tried increasing the width of the .NavContainer, thinking that there was some sort of overflow from the last button or something, but that didn't work either.

How do I get rid of this?

Thanks,

Brad

Hi

I have searched on this subject, and found the Faux Column articles, but I have failed to make use of these.

The following page shows the problem

LINK
And
CSS

The text in the container div leads off the bottom of the page.

The CSS is a bit of a mess at the moment because I have been messing with it trying to get this to work. I need the background of the container div to extend to the bottom of the content div.

I have set min-height and heights for the body and html tags, and then for the container, as I know that the height is only taken into account if the parent has a height too. This does not work.

Any suggestions?

Thanks

Jake

Here's the template I'm working on: http://dhost.info/justusvizslas/template.php

Here's my problem:
I'm trying to create a centered, two-column layout with a header and a footer, sort of like the tutorial he http://nemesis1.f2o.org/aarchive?id=7

I've got everything working correctly and it looks fine in IE. However, in FireFox, the container div doesn't automatically adjust its height to be the same as the height of the divs inside. Instead, I have to set the height at a certain number of pixils to even get the container div to show up. When I do that, in IE the container div defaults to the same height as the larger of the two inner divs, but in FireFox the container div just stays at whatever pixil height I specified. That becomes problematic because I don't plan on having all my pagecontent divs with the same height.

Any insight will be greatly appreciated. I've been looking at this for hours and haven't gotten it to work like it should. Here's the relevant code too:
CSS
Code:

#container {
		width:792px;
		height:50px;
		margin: auto auto;
		color:#000000;
		background-color:#FFFFFF;
		background-image:url(design/menuimage.gif);
		background-repeat:repeat-y;
		}
		
#navigation {
		width:125px;
		height:auto;
		padding:0px;
		float:left;
		margin-top:auto;
		vertical-align:top
		}

#pagecontent {
		width:667px;
		height:auto;
		padding:0px;
		float:left;
		margin-top:auto;
		color:#000000;
		background-color:#FFFFFF;
		text-align:center
		}

PHP
Code:

<div id="container">
  	<div id="navigation"><?php include "nav.php"; ?></div>  
	<div id="pagecontent">
  		<br />Some more content here<br />
	</div>
</div>

Again, thank you in advance for any help with this. If you're stumped and think it should work as-is, go ahead and go to the actual template I'm working on (first http link in this post) and look at it in IE and in FireFox to note the difference.

Well I'm running into just a few difficulties trying to enclose a object inside of another container. The problem is that the container does not repeat the background when I lengthen the boxes within it.

Can someone with a excellent CSS eye take a look at this and let me know what I'm doing wrong. I've played with overflow:auto; but the problem is that I need to set the width of the container at 990px, and it doesn't seem to work if I statically set the width.

http://www.obelix.ca/templates/index.html

I am trying to set a height of a container div, and have the inner div spill out of the container without changing the height of the container div:
Code:

	<style media="screen" type="text/css">
		.inner{
			width: 80px;
			height: 80px;
			background-color: #0000FF;
		}
		
		.outer {
			width: 120px;
			height: 20px;
			background-color: #FFFF00;
			overflow:visible;
		}
	</style>

IE 6 is giving me trouble. It insists on making the container div the same height as the inner div. Anything I can do to tell IE6 to not change the height of the container?

I have read and read through the CSS2 spec and I am unable to figure out if this is possible. Hopefully I can describe it well enough for somebody to help out.

Okay, what I want to accomplish seems simple. I want a div, lets call this one "container", with a calculated height/width relative to the document (in terms of percentage). Inside this div will be another div, lets call it "header", whos width will span the length of the containing div (100%) and height is fixed, lets say 30px. Now here comes the tricky part... a third div, lets call it "content" should sit right underneath "header" and its width will also be 100% of the containing div, but the height should fill the remainder of the containing div. I can't seem to get the "content" div to fill the remainder of "container" and scroll when needed. If I specify a calculated height, the offset of the "header" div is not taken into account so "content" div does not fit properly.

Thanks a ton if you can help me out. Please let me know if this doesn't make sense.

Hi,

I have two images which are on top of each other, and the one on top is hidden. I use JS to change the source of the top to a new image, then fade the top image visible, then change the source of the bottom to be the same as the top, then make the top hidden (and so on and so on).

To position the images on top of each other, I am using position: absolute. This works well when the DIV container has a defined height, however, when not the DIV collapses upon itself and the images are not displayed.

Any suggestions how I might overcome this?

Thanks
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Heights</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<style type="text/css">
.mod_rotator
{
position: relative;
overflow:hidden;
height: 100px;
}

.mod_rotate_image {position: absolute;}

img.mod_rotate_image.front {display: none;}

</style>
        
</head>
    
<body>
<div class="mod_rotator">
<img class="mod_rotate_image back" src="images/rotator/corporateimage1.jpg" />
<img class="mod_rotate_image front" src="images/rotator/corporateimage1.jpg" />
</div>
</body>

</html>

I may be trying to square the circle here. I have a container that is not the full length of the page [padding top and bottom].

Within the container, I have 2 main content elements:

1. a nested div forms a strip down the left edge, holding a decorative pattern. [note: it doesn't currently extend down the entire left edge ~ other items are above it ~ but I can include those in the strip and make it 100% if the idea is workable].

2. the main content div is beside it.

The container automatically adjusts to the height of the entire content in both divs.

I'd like for the 'decorative' div to automatically adjust to 100% height of the container instead [ie. match the height of the content to the right of it - automatically]. Is this possible?

Kravvitz....I know

How do you make a container div aware of the height of floated divs nested inside?

I have 2 floated divs, which are contained within a container div. The container has a background image that I need to tile vertically.

In FF the image does not tile unless I specifiy a height for the container other than auto. I don't want to set it to 100% because when I do, the container div extends much further than I intend it to.

Here is the link to the site with the problem.

CSS
Code:

 /* CSS DOCUMENT */
html, body {
  padding: 0px 0px 0px 0px;
  font: 10px Verdana, Arial, Halvetica;
  height: 100%;
  text-align: center;
  background: url(../images/bdy_back.jpg) #252525 no-repeat center;

#container {
  width: 938px;
  margin: 0 auto;
  text-align: left;
  height: auto;
  opacity: .90;
  filter: alpha(opacity=90);
  background: url(../images/middle2.jpg) repeat-y right #444444;
}
#lcol{
  float: left;
  width: 15%;
  height: auto;
}

#right {
  float: right;
  width: 85%;
  height: 100%;
}


}
 

HTML
Code:

<div id="container">
  <div class="hdr">

	<div id="officer" style="display: none;"></div>
  </div>
  <div id="lcol">
   
  </div>
  <div id="right">
    
  </div>
</div>
<div id="footer">

</div>

say you have a page with 2 main columns inside a container. the right column is a sidebar. both are supplied content dynamically. i'd like the container (inclusive) to be the height of the content column (as determined by its children), and the sidebar should scroll (vertically) its content based on that size. there's a (non-functional) example attached. if you run it you can see the container takes the height of the sidebar - it (the bordered container) should end at the bottom of the content div, and the sidebar should scroll.

it's laid out using floating divs, but tables would be fine; javascript is not (per client).

any ideas would be welcome.

tyia.
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	
	<style type="text/css">
		.container {
			border : 1px solid #F90; /* just to show container height */
		}
		.content {
			float : left;
			width : 400px;
			height : 100%;
		}
		.sidebar {
			float : left;
			width : 400px;
			height : 100%;
		}
		.scroller {
			overflow : scroll;	
			height : 100%;
		}
	</style>

</head>

<body>
	
	<div class="container">
		
		<div class="content">
			<p>Random content</p><p>Random content</p><p>Random content</p><p>Random content</p>
			<p>Random content</p><p>Random content</p><p>Random content</p><p>Random content</p>
			<p>Random content</p><p>Random content</p><p>Random content</p><p>Random content</p>	
		</div>
		
		<div class="sidebar">
			<div>Sidebar</div>
			<div class="scroller">
				<p>This content should scroll.</p><p>This content should scroll.</p><p>This content should scroll.</p>
				<p>This content should scroll.</p><p>This content should scroll.</p><p>This content should scroll.</p>
				<p>This content should scroll.</p><p>This content should scroll.</p><p>This content should scroll.</p>
				<p>This content should scroll.</p><p>This content should scroll.</p><p>This content should scroll.</p>
				<p>This content should scroll.</p><p>This content should scroll.</p><p>This content should scroll.</p>
				<p>This content should scroll.</p><p>This content should scroll.</p><p>This content should scroll.</p>
				<p>This content should scroll.</p><p>This content should scroll.</p><p>This content should scroll.</p>
				<p>This content should scroll.</p><p>This content should scroll.</p><p>This content should scroll.</p>
				<p>This content should scroll.</p><p>This content should scroll.</p><p>This content should scroll.</p>
			</div>
		</div>
		
		<div style="clear:both"></div>
		
	</div>
	
</body>

</html>

Hi!

Is it possible to align vertically block elements in a fixed-height (unknown) container?

If not, this is a serious shortcoming of the css model of placing objects on the screen.

Thanks!

I know this topic has been discussed a number of times in the past and I have read some of them. Kravittz I do appreciate all your knowledge in this area as you have answered a lot of my questions already.

But I do have a few problems yet.

I am switching now to set the font size in body as
Code:

body {
	font-family:Verdana, Tahoma, Arial; 
	font-size: 85%;
	color: #000000;
	background-color: #FFFFFF;
}

(actually not sure if I like Verdana or the good ol' Arial first. that is a different question)
Anyway, I set the font to 85% for body.
then for <p>
Code:

p {
	font-size: .8em;
}

That seems to look fine. but first question is for links <a>. I have some links that are just be themselves or sometimes in a <div> tag. Those ones are very large. So I set the size like this.
Code:

a:link {
	text-decoration: underline;
	color: #000000;
	font-size: .8em;
}

that works fine but them for the few links that are inside of a <p> tag it seems to adjust the size twice, once for <p> tag and then again for <a> tag. Thus making it twice as small as I really want.

How do I fix that? Do I need to make a whole bunch of psuedo classes for all those instances? Seems like there should be an easier way.

Any suggestions? Thanks!

Hi There -

Have a simple container div containing two other divs, top and content.

My problem is that I can't get the colorboxtop to stick to the top of its container. There's a wayward space. Can't find any stray margins or padding hanging around. Perhaps fresh eyes can see what I cannot. Please let me know.

Any help you can give me would be greatly appreciated. Thanks!

Code:

<body>

<div class="colorbox">

  <div class="colorboxtop">
    <h2>title goes here</h2>
  </div><!-- /colorboxtop -->

  <div class="boxcontent">
    <p>You should read this and <a href="#">Click Here</a>.</p>
    <a title="Go Here!" href="#">[button]</a>
  </div><!-- /boxcontent -->

</div><!-- /colorbox -->

</body>

No great complexity there...here's the CSS:

Code:

body {
	color:#666666;
	font-family:Lucida Grande,Verdana,sans;
	font-size:10px;
	font-size-adjust:none;
	font-style:normal;
	font-variant:normal;
	font-weight:normal;
	line-height:13px;
}

.colorbox {
	margin-bottom:9px;
	padding-bottom:15px;
	width:300px;
	border:thin solid #CCCCCC;
}

.colorbox h2 {
	color:#FFCC33;
}

.colorbox {
	color:#CC6633;
	padding:0px 20px 15px;
	margin-top:0;
	margin-bottom:10px;
}

.colorboxtop {
	background-color: #dddddd;
	height:50px;
	color:#666666;
	background-image: url(images/bg_Tiles/stripe-dk-blue-green.png);
	padding:auto 20px;
}

.colorbox a {
	color:#C5DBE9;
	font-weight:bold;
	text-decoration:none;
}

Hello there, first post, just need a quick fix. Hope you don't mind.

So I'm trying to make myself a new portfolio site, but there's this 'error' I can't seem to fix...

(Can't post a link in my first post, so just copy/paste "hellspike.thanez.org/newsite" in the addybar.)

Basically that 150*300 infobar is supposed to be right next to the image, but it always ends up above or below the container.

<!--AK47-->
<div id="imgcont0">
<div id="imgcont1"><img src="images/ak47/1.jpg"></div>
<div id="imgcont2"><img src="images/ak47/info.jpg"></div>
</div>
<!--/AK47-->

imgcont0 is a 825*300 container, in which imcont1 (render) and 2 (infobar) are supposed to be.

Stylesheet:

#imgcont0 {
width: 825px;
height: 300px;
margin-left: auto;
margin-right: auto;
}

#imgcont1 {
width: 650px;
}

#imgcont2 {
margin-left: 675px;
width: 150px;
}

As you see the code is simple, yet I can't seem to fix this problem. Ideas?