CODEWITHSUNDEEP
c#asp.nethtmlcssmaster-pages
Dot NET
Dot NET

Reputation: 4897

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

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;
}

Upvotes: 1

Views: 5911

Answers (2)

Dave
Dave

Reputation: 4412

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;
}

Upvotes: 0

Nate B
Nate B

Reputation: 6356

If the content inside the wrapper div is floated it won't wrap around it. Add overflow:hidden; or overflow:auto; to the .content CSS declaration to force it to expand along with the content.

Upvotes: 1

Related Questions