How to make a centered div container that can stretch vertically based on the elements inside?

I'm brand new to this and I'm trying build a simple layout of divs. I'd like to have 3 container divs: header, content, footer. The content div I don't want to have the height fixed, I want it to stretch based on whatever is inside of it. Also I don't know javascript so I want to do it with HTML/CSS only.

I've looked on this site for answers, but they don't seem to work. Here is the HTML:

<body>
    <div id="header" style="background:beige;">
        <div id="logo" style="background:gray;">
          put logo here 
        </div>
        <div id="navigation" style="background:grey">
          About Us, Contact Us, Etc....
        </div>
    <div id="content" style="background:beige;">
        <div id="bigbox" style="background:black; color:white;">
          big box would have some slide show here
        </div>
        <div class="smallbox" id="smallboxleft" style="background:green;">
          smallboxleft
        </div>
        <div class="smallbox" id="smallboxmiddle" style="background:green;">
          smallboxmiddle
        </div>
        <div class="smallbox" id="smallboxright" style="background:green;">
          smallboxright
        </div>
    </div>    


        <div id="footer" style="background:navy; color:white;">
          This is the footer
        </div>

Here is the CSS:

  #header{margin:0 auto; height:100px; width:960px; position:relative; }

  #logo{height:100px; width:200px;}

  #navigation{height:50px; width:400px; position:absolute; left:560px; top:50px;}

  #content{margin:0 auto; width:960px; height:100%; position:relative; top:25px;}

  #bigbox{position:absolute; height:300px; width:860px; position:absolute; left:50px; top:125px;}

  .smallbox{position:absolute; height:150px; width:300px; top:450px;}
  #smallboxmiddle{left:320px;}
  #smallboxright{left:640px; }

  #footer{position:absolute; height:100px; width:960px; top:625px;}

Answers


I usually end up using display: inline-block when I want an element to "shrinkwrap" to its contents.

inline-block makes the element generate a block box that’s laid out as if it were an inline box.


A friend (mrlostman) has given me the answer:

don't specify height and make #content { overflow : hidden }

when you have floated elements, they stop pushing their containers down. perhaps you felt >the need to specify height because of this ( #content would always stop short).

overflow:hidden is an accepted way around this

also creating an empty div just before the end of the container with { clear:both; >float:none; } would do the trick; but this way is not preferred

So, for #content, I simply modified to: height:auto; overflow:hidden;


Need Your Help

C++ Visual Studio 2010 C4717 compiler warning in one part of code but not in another

c++ visual-studio-2010 visual-c++ warnings

These six methods (really three, the ones that actually throw the warning are the non-const versions) are causing a C4717 (functions recursive on all paths) warning yet the method following these d...

JS href atrribute returns whole url

javascript url href

&lt;a id="link" href="file.ext"&gt;

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.