Container doesn't stretch...

[Zeradin]

I feel like I have this problem all the time and then I learn how to fix it and then it doesn't work again for a different reason. On this page the container doesn't stretch to fit the content.

 

it's like

container

-inner-container

--header(clear)

--main-content

--footer

 

the container has a repeating-y background and the inner-container has a color burst over the container image

 

Please help :-/

 

[haku]

I'm guessing the elements inside are floated. If that's the case, then set this on the container:

 

overflow:auto;

[saltedm8]

try putting a clearing div as the very last thing before the end of the container.. so under your main content like this

 

<div id="container">
<div id="inner-container"></div>
<div id="header"></div>
<div id="main-content "></div>
<div class="clearboth"></div>
</div>
<div id="footer"></div>

[haku]

A clearing div adds unnecessary content, which is why I prefer the example I gave above.

[saltedm8]

you may think its unnecessary content, but lets face facts.. overflow: auto is very very buggy and how much 'unnecessary content' is it adding ???... one line of code ? .. as if thats going to make a difference ??

[haku]

I've used overflow:auto too many times to count - not buggy at all. Works every time.

 

And one line of code is an unecessessary line of code. It can cause problems when traversing the DOM with javascript, it can disrupt things when using CSS and overall, it's unnecessary. Preferable to use a solution that works (honestly, I don't know where you are coming from with this buggy issue), without using the unnecessary line of code. Seeing as it's not necessary and all that.

[dbrimlow]

Before making assumptions about floats and clearing, 

I would like to see the css used for the containers. Does Zeradin use a fixed width or no width at all?

Was position:absolute used?

Are floated elements embeded in non-floated?

Is the nesting of the containers an issue?

 

Many things can cause a container to not be elastic - usually fixed or no widths designated.

 

************************************

 

Everyone has their favorite float clearing technique; there are potential issues with them all, particularly for cross-browser compatibility.

 

I still use and prefer the clearfix method - using the ":after" pseudo element and IE6 and IE7 HasLayout trigger hacks:

.header:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
/* triggers HasLayout for IE6  */

* html .header {height: 1%;}

/* triggers HasLayout for IE7 */

*:first-child+html .header {min-height:1px}

[haku]

That also seems like a lot of unnecessary code to me. overflow:auto is just one line.

 

But as for the various reasons why the container may not be stretching, I was taking a total guess. You are entirely correct that it could be a bunch of other things.

[Zeradin]

Overflow: auto works great except it puts the scroll bar on the edge of that container, not the page, which is not what I want it to look like.

 

The clear both didn't work.

 

Here's the css on the elements:

#container {
width: 900px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
min-height: 679px;
background: url(bg.png) repeat-y;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
position: relative;
}

#inner-container {
width:100%;
min-height:679px;
background: url(burst.png) no-repeat top center;
margin:0 auto;
text-align: left;
position:relative;
float: left;
}

#header {
background: url(title.png) no-repeat top right;
padding: 0px 0px 0px 0px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
height:150px;
width:100%;
position: absolute;
}

#mainContent {
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
background: none;
float: left;
position: absolute;
top:150px;
}

#footer {
padding: 0px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
background:#DDDDDD;
position:absolute;
bottom:-10px;
width:100%;
text-align: center;
}

 

thanks for the help guys

[haku]

Try removing the absolute positioning, and using floats instead.

[dbrimlow]

Overflow: auto works great except it puts the scroll bar on the edge of that container

 

That's why many of us do not use it.

 

9 times out of 10 "position:absolute" is the problem. It is a very nasty element when used for layout and any liquidity is expected.

 

float AND position absolute is counter-productive - just use floats.

 

But you are ALSO designating fixed heights and 100% widths.

 

!00% width and float is also counter-productive.

 

You may not want to float.

 

But, to clear your #header float ...

 

Try this  - just put it, as is, at the bottom of your css:

 

#header:after {

    content: ".";

    display: block;

    height: 0;

    clear: both;

    visibility: hidden;

}

/* triggers HasLayout for IE6  */

 

* html #header {height: 1%;}

 

/* triggers HasLayout for IE7 */

 

*:first-child+html #header {min-height:1px}

[Dorky]

im not sure if you are trying to stretch the inner or outer container, if it is the inner, does it compete for vertical alignment? im thinking no since you used 100%;

if it is then using float: and clear: is the right way and if its not working you should find what is conflicting. if its the inner or outer and its not competing for vertical space then try this

 

width: auto; margin-left: whatever; margin-right: whatever;

[TheFilmGod]

Dbrimlow, I have to disagree with you on this one. The clearfix is a little decisiving, for it isn't "clear" or any better than the one line clear Haku recommended. Overflow: auto; Well actually, the correct one line clear method is overflow: hidden;. Auto will cause scrollbars to pop out under certain scenarios; this isn't true for overflow: hidden;

 

I have yet to see cross-browser compatibly issues with overflow: hidden;. I don't count IE6. Less than 4% of my user base uses IE6. (Do not use this statistic for your own website - especially if your website is for a company!!).

 

However, overflow: hidden is not infallible. For instance, overflow: hidden; failes when you use absolute position elements with a negative margin so they stick out of the div container they are held in. A good example of this is when you have a form and you want to show a nice big check mark under on the left hand side of a form element when it validates. Overflow: hidden will not work to clear the objects inside the parent because this property will cause all elements that "stick out" of the parent's dimensions to be "hidden" hence over-flow is hidden. To fix this issue one can use an extraneous div to hold the floats, OR use a clearfix dbrimlow mentioned. the clearfix I use is a derivative of the clearfix code dbrimlow posted, with a slight modification.

 

I hope this sums up the uses of the clearfix/overflow: hidden! The most comprehensive summary on the internet thus far.

[Dorky]

 

im not a mod but i get this a lot on my threads as well. this line of conversation is not helping the person who posted for help. i think sticking to the problem presented is more useful. if you must debate the issue, maybe put together a working page on your server with an example of your points and post a link so that at least your debate is informative and productive.