How can I make the height of a div section to automatically adapt to the height of its content?


Tags: html,css,layout

Problem :

I have a div container with id=middle that is centered in the page by this code:

header, #middle, footer {
    margin-left: auto;
    margin-right: auto;
}

Inside the div named middle there are the nav and the main section. The div is acting like a container for the nav and the main, so it should be easier to align the nav to the left and main to the right while keeping them centered.

I tried to do such alignment by the following code:

#middle {
    width: 849px;
    height: 600px; /*I wanto to set this to auto or get rid of it*/
}

nav {
    width: 200px;
    float: left;
}

main {
    width: 649px;
    float: right;
}

It works, but I have to specify the height of #middle, it doesn't automatically adapt to the height of its content, messing up all the rest of the layout. In my site, the height of main and nav varies from page to page.

How can I fix this? I don't want to specify a fixed height for #middle, instead I would like that #middle varies its height depending on the maximum height between main and nav.

I don't know if it is useful but the CSS code ends with:

footer {
    width: 849px;
    height: 50px;
}

And this is the HTML code of my page:

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <header>
            ...
        </header>
        <div id="middle">
            <nav>
                ...
            </nav>

            <main>
                ...
            </main>
        </div>
        <footer>
                ...
        </footer>
    </body>
</html>

N.B. nav and main are the semantic html5 tags, similar to div



Solution :

Add a <div> with clear: both; after </main>. Then You can remove height of #middle


    CSS Howto..

    How can I apply CSS to an HTML text input?

    How To Add % Based Image To CSS? (for fluid layout)

    Use CSS to show two div's with background image over a containing div

    How to make a background-color transition that eventually covers div to center? [closed]

    How to display items side by side until window width then in next row

    how to give space between tr tag and divide by | in html

    How to view the compiled css from sass files in ruby on rails?

    Javafx CSS How to inherit background color from other css settings

    How to change font-size of multiple elements using jQuery

    How to make letters in SVG to be animatable individually?

    How to move text up using CSS when nothing is working

    How do you specify a css property to be applied only if the browser is IE in the stylesheet?

    CSS Background Color Not Showing

    how to call browser based css?

    How to make jQuery dialog popup stay in the center of browser (specific situation)

    How do I apply CSS styling to a
    block?

    how do I get my background to stretch the entire page

    How to make the bootstrap button,when clicked to redirect to a specific page

    How can I adjust the margins of quote symbols added with CSS

    CSS how to select first occuring element after another element

    how can tell element to get specified styles?

    How to align content to the bottom of a div?

    How do i style a list within a list?

    Once I've designed a navigation bar using CSS & html — how can I put the html code in one place so it shows in each window? [duplicate]

    How to add border for html tr

    How to force elements to be in middle?

    How to replace inline text with images using CSS

    How to I center my submit button in CSS?

    How to use CSS Overflow: hidden to avoid the parent container grow

    How to add CSS to a class through jQuery?