How to make the height of a div within a master page expand in a content page?


Tags: c#,asp.net,html,css,master-pages

Problem :

I've got a master page which has a div as a border for the whole page.

I would like this div to expand depending on content placed in the content page.

How would one go about doing this? I have no problem using clear:none in a div without inheriting the page from a master page (i.e. without using a master page at all). However, when I use a master page, the div does not expand.

Current code in Master page:

<div class="page-border">
    <div class="header">
        HEADER</div>
    <div class="outer">
        <div class="content">
            <asp:ContentPlaceHolder ID="contentPlaceHolder" runat="server">
            </asp:ContentPlaceHolder>
        </div>
        <div class="banner">
            BANNER
    </div>
    <br style="clear:none"/>
</div>

EDIT: I've added the CSS classes below:

.page-border
{
    width: 1000px;
    padding: 10px;
    margin: 0px auto;
    border: 1px solid gray;
}

.outer
{
    float: left;
    padding: 0px;
    margin-right: 0px;
    margin-top: 10px;
    width: 986px;
    margin-left: 12px;
}

.content
{
    float: left;
    height: 503px;
    width: 779px;
    margin-bottom: 0px;
    margin-left: 2px;
}


Solution :

If this doesn't, work, we'll need to see the style rules for .content

<div>
    <div class="content">
        <asp:ContentPlaceHolder ID="contentPlaceHolder" runat="server">
        </asp:ContentPlaceHolder>
        <div style='clear:both'></div>
    </div>
    <div class="banner">
         BANNER  
    </div>
    <br style="clear:none" />
</div>

Update of one class:

.content
{
    float: left;
    min-height: 503px;
    width: 779px;
    margin-bottom: 0px;
    margin-left: 2px;
}

    CSS Howto..

    How can I align two icons on my webpage next to each other?

    How to attach click event to a css styled checkbox

    How to make a image resize to fit a div

    How to display a centered background of fixed width

    How to change position of Semantic UI sidebar for different screen sizes?

    How to fit a list of images in an HTML div to form a 2D grid?

    How to redefine a CSS class for the whole document?

    only show those div where i do mouse-over

    How do you use csslint from the command line?

    How to draw heart using HTML/CSS table?

    CSS How to keep page centered, but still put stuff where I want

    how to create a fullscreen website design?

    How to keep text in textfield even after focus and remove on key press?

    How to apply effects to a unicode character in CSS? [closed]

    How can I stretch my navigation and content area height to 100% in CSS?

    How to stop CSS/HTML navigation menu wrapping at different resolutions?

    nth-of-type css, how to setup it properly

    How to have logo go into / overlay black bar along the top of screen?

    Wordpress: Have no idea how to change the navigation bar

    How to make a ruler scale in HTML and CSS

    How fix labels placement so them not overlap in DevExpress js chart?

    How can one fix a CSS3 graident background when using a box for content?

    How to make div's inside div responsive

    Getting an class to show when item is clicked

    How to place an image between horizontal list items

    How determine what CSS selector to use from my HTML source code?

    how to do jquery once fade out has finished?

    How to avoid ui-block div (jquery mobile) to overlap in internet explorer?

    CSS - How to align divs horizontally?

    How to create a natural-looking line using css and maybe javascript? [closed]