Home ›
ASP.NET Forums » General ASP.NET » Master Pages, Themes and Navigation Controls » Help with DIV Layout in MasterPage and ContentPlaceHolder

Help with DIV Layout in MasterPage and ContentPlaceHolder

Last post 01-29-2008 1:36 AM by Amanda Wang - MSFT. 3 replies.

Sort Posts:

  • Help with DIV Layout in MasterPage and ContentPlaceHolder

    01-27-2008, 12:35 PM
    • Member
      19 point Member
    • mickey12345
    • Member since 01-06-2007, 12:57 AM
    • Posts 68

    I'm relatively new to ASP.NET and worst of all I am not a web designer.  I'm responsible for converting an existing application from .NET 1.1 to 2.0 and must utilize MasterPage concept.  I have no trouble creating a stylesheet.css with all DIV layout using float.  My trouble came when I drag web controls into the contentpage (not MasterPage PlaceHolder1) the control would not stay inside the content area.  In other words, when I resize my browser window, the masterpage resize fluidly but all the controls stay put.

    I don't know how to make all the controls move with the masterpage.

    Below is my stylesheet.css and attached is the result of my page after resizing.

    1    body
    2    {
    3    margin: 0px;
    4    padding: 0px;
    5    top: 0px;
    6    left: 0px;
    7    }
    8   
    9    #header
    10   {
    11   background-color: #6699cc;
    12   width: 100%;
    13   height: 50px;
    14   }
    15  
    16   #subheader
    17   {
    18   background-color: #66cc00;
    19   width: 100%;
    20   top: 50px;
    21   height: 50px;
    22   }
    23  
    24  
    25   #personalityzone
    26   {
    27   background-color: #ffffcc;
    28   width: 100%;
    29   top: 100px;
    30   height: 50px;
    31   vertical-align: middle;
    32   }
    33  
    34   #leftmenu
    35   {
    36   background-color: #cccccc;
    37   float: left;
    38   top: 150px;
    39   width: 19%;
    40   height: 600px;
    41   }
    42  
    43   #content
    44   {
    45   background-color: #ffccff;
    46   float: left;
    47   top: 150px;
    48   width: 80%;
    49   height: 600px;
    50   }
     

     

  • Re: Help with DIV Layout in MasterPage and ContentPlaceHolder

    01-27-2008, 12:46 PM
    • Contributor
      4,732 point Contributor
    • RTernier
    • Member since 06-05-2003, 1:40 AM
    • British Columbia, Canada
    • Posts 1,106

     Using "top" in any CSS Styles will not work unless it's absolutely positioned.

     

    As well, when you have content that is being floated, make sure you have a clear:left or clear:both  after so the rest of your elements are positioned well.

    However, it's hard to see without any markup.     

    The Killer Ninja Coding Monkeys thank those that mark helpful posts as answers.

    My Site | My Examples | My Blog


  • Re: Help with DIV Layout in MasterPage and ContentPlaceHolder

    01-27-2008, 3:35 PM
    • Member
      19 point Member
    • mickey12345
    • Member since 01-06-2007, 12:57 AM
    • Posts 68

    Where would I put the CLEAR:BOTH statement (at the end of #content)?

    Do you recommend to get away from FLOAT design and use ABSOLUTE POSITIONING?

    Basically, I'm looking for a way to keep all my controls from the content page to stay within my #Content Area.  If I resize the browser, everything would move together as a single unit.

    Below is my mark up for the MasterPage.master

    <%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head runat="server">

    <title>Untitled Page</title>

    <link href="css/StyleSheet.css" rel="stylesheet" type="text/css" />

    </head>

    <body>

    <form id="form1" runat="server">

    <div id="header">

    <h1>

    Header</h1>

    </div>

    <div id="subheader">

    <h1>

    sub header</h1>

    </div>

    <div id="personalityzone">

    <asp:Label ID="lblLastLoggedOn" runat="server" Style="z-index: 100; left: 480px;

    position: absolute; top: 124px" Width="280px"></asp:Label>

    <asp:SiteMapPath ID="SiteMapPath1" runat="server" Style="z-index: 102; left: 8px;

    position: absolute; top: 128px">

    </asp:SiteMapPath>

    </div>

    <div id="leftmenu">

    <asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1" ShowLines="True"> <HoverNodeStyle BackColor="Yellow" />

    <NodeStyle Font-Italic="False" />

    </asp:TreeView>

    &nbsp;

    </div>

    <div id="content">

    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

    </asp:ContentPlaceHolder>

    </div>

    <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />

    </form>

    </body>

    </html>

  • Re: Help with DIV Layout in MasterPage and ContentPlaceHolder

    01-29-2008, 1:36 AM
    Answer

    Hi,

    mickey12345:
    In other words, when I resize my browser window, the masterpage resize fluidly but all the controls stay put.

    If you want to make the all the controls  resize when you resize the the browser window, you also need to set the height of the control is by percent %, and set the controls' width and height is 100% that is in the div.

    Additon, you also set the html and the body's width and height is 100%. Like below:

     * {margin: 0; padding: 0;}
       html, body
       {
           height: 100%;
           margin: 0px;
        padding: 0px;
        top: 0px;
        left: 0px;
       }

     

    Hope it helps.
       

    Amanda Wang
    Microsoft Online Community Support

    Please remember to mark the replies as answers if they help and unmark them if they provide no help.
Page 1 of 1 (4 items)
RSS Available

Contact | Advertise | Issue Management by Axosoft's OnTime | Running IIS7
All Rights Reserved. | Terms of Use | Trademarks | Privacy Statement
© 2009 Microsoft Corporation.