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..

    jQuery & CSS - How to stop a relative element from floating left and right (when you're scrolling)?

    how to relate to a relative css of master page?

    How to understand other people's CSS architectures?

    How to modify only via CSS a color already defined in HTML?

    How to code a drop down menu in css?

    How to set the path to compile my CSS with Compass SASS

    How to capture hover events on css (less) box-shadow

    How to combine multiple css framework with overpalling classes

    How do you make an input element fill parent?

    How do I combine two columns with different formatting?

    How to create a full width background image with a variable height depending on content?

    How to centre and make responsive a row of divs

    How to change css for each additional innerHTML element in a javascript for loop

    How to styles labels only within fieldsets using CSS?

    How to make a radio looks like disabled but don't specify disabled=“disabled”, just using css and js

    How to display html with css stylesheet in TextView?

    How to vertically align middle some header text between 2 header images on a website?

    How to dynamically manipulate elements in HTML

    How to make background image position stay same on all resolutions?

    How to Skew divs with css

    How can I modify a CSS class using JavaScript?

    CSS, a Fixed Position Div with Dynamic Content - How to Position Another Div Underneath it?

    how to turn off the break word in css? [duplicate]

    Selenium: how to define css if webpage has mutiple elements with same name

    CSS how to center ::after pseudo elem

    How to set minimum height for a div?

    How to apply pseudo-element styling to specific class only?

    How to make the margins and border in a mobile website invisible html/css

    jQuery Mobile - How to change the css classes to be applied when i use a data-attribute?

    How to center inside divs in a 1140px fluid responsive framework?