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 to do scale to fit in my case?

    How can a CSS id style be accessed in jquery?

    How can I make a Div that stays on its position?

    How to inherit CSS Menu on each html page linked on Homepage without using any javascript and templates

    CSS - How to Draw a Multi-Coloured Line?

    How to implement fluid font size using pure CSS

    How to get the CSS-Code and save in a String?

    How to split an HTML paragraph up into its lines of text with JavaScript

    How to vertically aligned to middle with bootstrap?

    How to put logo on navigation bar

    How to delete white space between two div element when they display as inline-block [duplicate]

    How to use a variable for image paths with less mixins

    How to select with css specific id only if have specific class on same div?

    How to change and maintain multiple color themes at runtime with css?

    How to get a gradient background for table rows with JSF and CSS?

    How to set fixed base to calculate vh unit in css on mobile?

    Dropdown not showing on small screens

    how to fix a display difference between chrome and firefox for css relative position?

    Table cells without borders having white lines - how do I disable them?

    How to detect all events added on a div

    How to draw a guitar string using css?

    CSS: how to have child1 the same height as child2?

    How can I use :nth-child() to select every other
    within ALL children?

    CSS: How to get browser scrollbar width? (for :hover {overflow: auto} nice margins)

    How to make sure the UI always shrinks and fit to the window irrespective of the resolution and device via viewport or CSS

    How can I 'page zoom' on mobile browser

    Can't Figure Out How to Fix CSS Width

    How can I make responsive JQuery left margin?

    How to use CSS float without hiding parts of a DIV

    How to position two
    elements side by side?