Child div expand to fit parent?

linchpin311 · Apr 20th, 2008, 00:22

So i have done many a search in various forums and on google and i came up short so i figure i'll post my delima here.

Ive been using tables for some time now but knowing it will be better for me in the long run, im trying to do away with them and use div's and css. I have a parent div (we'll call it main) with three children div's (we'll call them top, middle and bottom) inside. The main div's height is set to 100% (thats 100% of the body) while the top and bottom div's heights are both set to 100px. To keep the site looking the way i want it to, i would like the middle div to expand to fit the remaining space in the parent div. If i set the middle div's height to 100% it displays at the same size of the parent div (i know this is because of the way div's work and the box model and so on...). But i need it to display at 100% of the remaining space inside the main div.

I know this is pretty easy using tables but how can it be done using div's and css? Any ideas? Many thanks in advance!!

Bocaj · Apr 20th, 2008, 01:28

Could you post your code so far?

Setting the height to 100% restricts the vertical flow,

For the footer try using position: absolute;

I quickly wrote this css which should work...

Code: Select all

html { 
    padding:0px;
    margin:0px;
}

body {
    background-color: #e1ddd9;
    font-size: 12px;
    font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
    color:#564b47;  
    padding:0px;
    margin:0px;
}

#container{
    height:100%;
}

#top{
    position:relative;
    height:100px;
    background-color:red;
}


#content {
    height:100%;
    padding: 0px;
    background-color: #ffffff;    
}

#bottom{
    position:absolute;
    height:100px;
    width:100%;
    bottom:0px;
    background-color:red;
}

The colours are just so the sections are easily visible...

And this structure for the divs

Code: Select all

       <div id="content">
        <div id="top">
          Blah blah Blah blah Blah blah Blah blah
        </div>
           Blah blah Blah blah Blah blah Blah blah
       <div id="bottom">
        Blah blah Blah blah Blah blah Blah blah
       </div>
     </div>

Notice the way i've nested them within the content, this is mainly due to the footer, as it create a page size of 100%+100px

So nesting them creates a page of 100% and then subtracts the 100px needed for the footer.

Is this any help to you?

P.S neither have been checked for validation, I generally leave this until after i have a working model.

linchpin311 · Apr 20th, 2008, 11:16

wow, thats real clever the way you nested the div's like that. and it works great too!!

my code was just like:

Code: Select all

<html><head>

<style type="text/css">

body {
    height:100%;
    margin:0px;
    padding:0px; }

div.main {
    height:100%;
    width:984px;
    background-color:yellow; }

div.top {
    height:100px;
    width:100%;
    background-color:blue; }

div.middle {
    height:100%;
    width:100%;
    background-color:green; }

div.bottom {
    height:100px;
    width:100%;
    background-color:red; }

</style>

</head><body>

<div align="center">
<div class="main">

    <div class="top">header</div>
    <div class="middle">content</div>
    <div class="bottom">footer</div>

</div>
</div>

</body></html>

i gave my content its own div inside of the main div and as you can see the results would have never gave me the layout i was looking for.

on a short side note: ive noticed that when defining css attributes many people (you included, Bocaj) will say something like:

Code: Select all

#main {
    height:100%;
    width:984px;
    background-color:yellow; }

#top {
    height:100px;....so on and so forth

and then in the body put:

Code: Select all

<div id="main">text</div>
<div id="top">more text</div>

what is the difference between the class and id attribute? are there benifits to id over class? can you use class and id in the same div tag for even more control in your css stylesheets?

dab42pat · Apr 20th, 2008, 11:21

The difference between <div id and <div class is

id can be used only once on a page and class can be used as many times as required.

Hope that helps.

Pat

aso186 · Apr 20th, 2008, 11:27

Here's a quick read on ID's vs classes.

Generally, most developers will use ID's for things like footers, wrappers and navigation.

It just separates them from the mix of classes, and since there's only one per page, it makes sense to use ID's in these conditions.

linchpin311 · Apr 20th, 2008, 21:16

wow, very cool and informative, thanks a lot guys!!