div容器未拉伸主要全宽div

Question

I want to make layout where I will have different full width backgrounds. For example top is full width orange color, inside the full width div I have container that keeps everything in specific dimension (width: 1000px). And I met a problem, The content of the container div doesnt stretch the full width div. So right now to keep it work, I have to set in .orange and .red specific height. But this is not the solution, because right now my block has xxx heights, what If I add something like more pictures - I have to set bigger hight etc...

Here is what I mean:

HTML

<div class="full-width orange">
    <div class="container">
        content
    </div>
</div>

<div class="full-width red">
    <div class="container">
        content 2
    </div>
</div>

CSS

.full-width {
    clear: both;
    width: 100%;
    overflow: hidden;
}

.container {
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

.orange {
    background-color: orange;
}

.red {
    background-color: red;
}

I am sorry for my bad english.

Answer 1

if you put more content into your DIVs, they will stretch. their default height is auto ( http://www.w3schools.com/cssref/pr_dim_height.asp ) which automatically stretches the div to the height it needs to be. if you set height to a percentage, the div will be that percentage of it's parent container.

here is a JS fiddle for you to play with http://jsfiddle.net/dv9ah/ i set the

    height: auto;

in both the .red and .orange classes, but you can change them to a set height (like 100px) to see how they change.