CSS - Ie7 Container Div Expansion Bug

I am a new user to the board and apparently cannot make posts containing URL's. Examples illustrating my issues described below are at

...lilinks.com


/gp/css_prob/kickboxing.html

I want to get the vertical scrolling images to consistently display from the top of the page and terminate at the top of the black footer. Similar image scrollers will appear on other pages that will be of varying depth (follow the 'Brazilian Jiu Jitsu' link for an example)


Right now I have one 'container' that would be used for all the pages. I could create separate 'containers' for each scroller and set the height in pixels, but of course I cannot control browser settings, OS, etc.

So my basic question is how can I contain the 'container' to 100% of the main content area without exceeding it. I want it to look like this:

/gp/css_prob/kb.jpg


The style sheet is he

/gp/css_prob/css/test.css


Thank you in advance for your assistance.

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

Code:

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

here's my site for reference.
http://www.tobaccosmokeshop.com/temp.htm

here's some code
PHP Code:
#breakfootercontainer{
clear:both;
border:solid 1px red;
background:url(images/navback.gif);
background-repeat: repeat-y;
padding:0px 0px 0px 189px;
width:100%;

}
#footer{
border:solid 1px green;
float:left;
width:562px;
text-align:center;
} 





breakfootercontainer is a div that spans the whole width of my site, but pads over for my navigation bar. The problem is, In IE the container holds the footer, but in Mozilla (PC) and on my mac in safari and Mozilla the container is only like 0 px height and the footer div pops over the bottom border on the container.

Here's my code I'm using.
PHP Code:
<div id='breakfootercontainer'>
  <div id='footer'>
  <a href='' class="mainnav">duplicate nav</a><br>
  <a href='' class="mainnav">duplicate nav</a><br>
  <a href='' class="mainnav">duplicate nav</a><br>
  <a href='' class="mainnav">duplicate nav</a><br>
  </div>
</div> 





What is causing the container to not fill around the info inside the footer?

Also, I have 2 columns(red border around field picture and welcome column and the nav with the blue border) with a container around them (big white border around both), one shorter than the other (the red border column), but I want the shorter one to go the full length of the container (white border) so my column backgrounds line up and part of the page isn't longer than the other. I want to use my footer as a cap all the way across the page. Is there any way to do this without putting <br>'s in the smaller container to fill it out?

Hello,

I am asking this here because maybe you people have seen something like this before.

I am trying to create a container that will contain other div boxes. These boxes could have differen width and heigths, and I would like thos container to handle there position.

I do not know if this is even possible, another solution would be that you put the boxes in the container and determine how many you want to display in one line.

However thanks for any sugestions,
regards,
sim085

Firefox is giving: http://www.promogift.be/index.php?page=producten&catnr=7

So it shows the content out of his box, after a refresh everything is correct, how can i get it working from first loadtime?

Hi!
I want to align my container div 120px to the left from the center, what css code should I use for that?

You can see the homepage at madeleinegaterud dot com/test

Hey All,

I am wondering if it is possible to make a <div> container that grows depending on the size of the other <div> inside of it. Basically the scenario that I am going for...

- I have a container <div> that centers all other <div>s on the page.
- The container <div> has a double border on it that I would like to appear all of the time.
- Depending on the content from page to page that sizes the <div>s inside the container <div> I want the container <div> to change (in height) so that the border stays and so that I can just keep the CSS definitions the same and not worry about changing them on every page.

Is this possible?

A cheesy way to do this is to just put a whole bunch of line breaks in the container <div> until the page is the height that I want it to be. That's fine, but it makes the code look sloppy and there HAS to be a better way to do this.

~darknailblue

Hi, i seem to be having a problem displaying my container as 100%. I have a centred column with a grey background with the following as my html and my css:

Code:

<html>
<head>
<link rel="stylesheet" href="default.css" type="text/css" />
</head>
<body>
<div id="container"><!--BEGIN CONTAINER-->
		<div id="logo"></div>
		<div id="motto">
			<div id="telno"></div>
			<div id="quote"></div>
		</div>
		<div id="navigation">
		</div>
		<div id="search"><!--BEGIN SEARCH-->
		</div>
		<div id="banner_1"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="empty"></div>
		<div class="box2"></div>
		<div id="contenthome"></div>
		<div id="sectiontwo"></div>    
		<div id="sectionthree"></div><!--END SECTION THREE-->
		<div id="footer"></div><!--END FOOTER-->  
</div><!--END CONTAINER-->
</body>
</html>

CSS

Code:

*{
    padding:0; margin:0;
}
 
body {
    height: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 12px;
    color: #797979; margin: 0; padding: 0; background-color:#dfdede;
}

div {
	border: 1px solid #000;
}

a {
  font-family: Arial, Helvetica, sans-serif; font-size: 11px;
  color: #66308f; text-decoration:none;
  }

#container {
    height: 100%; width: 927px; margin: auto;
	padding-left: 10px; padding-right: 10px; background-color: #ffffff;
	min-height: 100%; /* for mozilla */
}

#logo {
  background-image:url(../images/logo.jpg); background-repeat:no-repeat;
    height: 164px; width: 374px; float: left; margin-top: 0px; margin-left: 0px;
}

#motto {
height: 164px; width: 549px; float: right; margin-top: 0px;
}

#telno {
height: 58px; width: 549px; float: right; margin-top: 24px; text-align:right;
}

#quote {
height: 80px; width: 549px; float: right; margin-top: 0px;
font-size: 25px; color:#2a4b59; text-align:right;
}

/* top menu navigation */
#navigation {
    height: 35px; width: 670px; float: left; margin-top: 0px;
}

/* search box */
#search {
    height: 35px;width: 253px; float: left;
    margin-top: 0px; background-color:#66308f; text-align:center; vertical-align:middle;
}

.button {margin:0px 0 -3px 5px;}

.inputbox {
	width: 13em; margin:2px 0 0px 0px; color: #878484; text-align:left;
	}

/* search box end */

.box{
  height:52px; width:205px; float: right;
  margin-top: 0px; margin-right: 0px; margin-bottom: 4px; margin-left:0px;
  }
  
.empty { 
height: 94px; width: 205px; float:right;
}

.box2{
  height:141px; width:205px; float: right;
  margin-top: 0px; margin-right: 0px; margin-bottom: 4px; margin-left:0px;
  }

#contenthome {
  height: 50px; width: 927px; float: left;
  margin-top: 5px; margin-left: 0px;
}

#sectiontwo {
    height: 50px; width: 927px; float: left;
    margin-top: 0px; margin-bottom: 10px;
}

#sectionthree {
    height: 50px; width: 927px; float:left;
    margin-top: 0px; margin-bottom: 15px;
}

#footer {  
    background-color:#b3d800; height: 56px; width: 927px;
    float: left; margin-top:0px;
}

#banner_1 {
    height: 413px; width: 701px; float: left; margin-top: 0px;
    margin-left: 0px; border-right-color: #FFFFFF; border-right-style: solid; border-right-width: 2px;
}

but for some reason i cant seem to get the container to fill the complete height of the page and i cant seem to locate what error i have made. If somebody could please help, as i would like this to work in all browsers.

Thanks in advance.

Hi,

I'm trying to center the main container here, as you can see it's aligning to the left:

http://www.wordpressforrealestate.c...es/Design2/www/

If I remove the container width of 100% it centers, however, I need that 100% width so my footer background image can span across the whole footer.

Any ideas?

Thanks.

Hey guys,
I have a web layout with 1 centre column with a height of 100% (i.e. it fills the whole window from top to bottom). I have achieved this using height: 100% and its worked so far but I've just hit a problem.

When the content is less than the height of the browser window it is fine - the white extends to the bottom perfectly in both FF and IE. However, if the content extends over the height of the window, the white background stops. So the CSS is making the column the height of the window without taking into consideration the content that is inside it so that when you scroll down, the background dissappears.

Any help would be appreciated.

The page that works fine: http://www.dgwd.co.uk/1476/site/aircadets/index.php

The page that doesnt: http://www.dgwd.co.uk/1476/site/aircadets/uniform.php

Thanks a lot guys.

Dan

Hi all,

Helping out a buddy, but am stuck myself. Possibly simple fatigue.

At this site, I'd like to move the entire center container up so that it's only about 20px below the very top. As of right now, when I do this, the top BG image disappears. As you can see from the CSS, there's actually two BG images.

I don't want that, I merely want the center container to cover the BG.

How, please?

Thanks!

Chris

I got a bit of a problem, I don't know if this is possible but I want a container that resizes depending on the content inside it.

BUT I want the rest of the containers to be the same size as the biggest.

I.e.


--------- --------- --------- ---------
| | | | | | | |
| | | | | | | |
| | --------- --------- ---------
---------




See the first one is bigger?
Well I want the rest to be of the same size, i.e.

--------- --------- --------- ---------
| | | | | | | |
| | | | | | | |
| | | | | | | |
--------- --------- --------- ---------

Thanks for taking the time to read my question.

I have 2 containers, one inside the other. If the inside container grows I want the outside container to grow with it. Is that possible?

Here is what I have so far...

datacontainer is not growing when piccontainer grows.

HTML:
Code:

<body>
<div id="datacontainer">
	<div id="piccontainer"><img src="../../My Pictures/Copy of PiercedDesktop51024x768.jpg" alt="" /></div>
		Data</div>

</body>

CSS:
Code:

body {
background-color: #000000;
margin-top: 0px;
font-family: Arial, Helvetica, sans-serif;
background-position: top left;
background-repeat: repeat-y;
background-image: url('VSADImages/Border.jpg');
}

#datacontainer {
margin: 0;
padding: 0px;
border-style: solid;
border-color: yellow;
background-color: #00FFFF;
border-width: 2px;
height: auto;
}

#piccontainer {
float: left;
width:700px;
margin: 0;
border-style: solid;
border-color: green;
background-color: #FF6600;
border-width: 2px;
}