Using a Master Page to create a 2 column CSS layout

The tutorial is just a starting point to show you how you can combine CSS layouts and Master Pages to create a fairly straightforward 2 column CSS layout for your website.

It’s a good idea to have an understanding of Master Pages, Content Pages, CSS Layout and how to create and run a website in Visual Web Developer or Visual Studio before you go any further.

The Master Page in our example will include a CSS file which defines the layout and we can then just create Content Pages that rely on the Master Page for their layout.

Below is our simple stylesheet ‘stylesheet.css’.

body {
margin: 0;
padding:0;
background: #fff;
}

#headercontent{
 width: 100%;
 height: 70px;
 margin: 0;
 border: solid #333;
 border-width: 0 0 2px 0;
 }

#leftcontent {
width: 80%;
float: left;
color: #000;
padding: 5px;
}

#rightcontent {
float: right;
width: 15%;
padding: 20px;
}

Next we create a Master Page ‘Masterpage.master’ that includes our stylesheet within the HTML title element as is highlighted in green below.

We’ve used Visual Web Developer to create the Master Page. Notice that the software has placed the <asp:contentplaceholder> control in the page by default.

<%@ Master Language="VB" %>

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

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
 <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
 </asp:contentplaceholder>

</div>
   
    </form>
</body>
</html>

We need to slightly edit the code above, and have made the changes below. We have created 3 divs. There’s a header div with the unique id ‘headercontent’ which is where the logo goes. We’ve just used a simple HTML img element rather than an ASP.NET Image control.

There is also 2 other divs with id’s ‘leftcontent’ and ‘rightcontent’. The leftcontent is where each individual Content Page will have it’s own content and the right content is where the standard site-wide navigation will go.

The important point to notice is that the contentplaceholder is within the leftcontent div as this is where the unique content for each page goes. Every Content Page will have the same layout, same logo and same navigation though the contentplaceholder allows for unique content.

<%@ Master Language="VB" %>

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

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
   
<div id="headercontent">
<img src="CodefixerLogo.gif" alt="CodefixerLogo" />
</div>

<div id="leftcontent">
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
        </asp:contentplaceholder>
</div>

<div id="rightcontent">
<a href=”page1.aspx”>Page 1</a><br />
<a href=”page2.aspx”>Page 2</a><br />
<a href=”page3.aspx”>Page 3</a><br />
<a href=”page4.aspx”>Page 4</a><br />
<a href=”page5.aspx”>Page 5</a><br />
</div>

  </form>
</body>
</html>

Figure 1 shows a screenshot of what we are trying to achieve for our Master Page layout. The area with the dotted border is where the <asp:contentplaceholder> control goes.

Figure 1
Master Page CSS

As we are going to create 5 pages for our website we already added the navigation links into the Master Page. We used standard HTML links for simplicity though you could use the ASP.Net hyperlink server control.

Our next step is to simply create those 5 Content Pages called 'page1.aspx', 'page2.aspx', 'page3.asp' and so on.

The code for our content page 'Page1.aspx' is below. It's fairly standard stuff incorporating the 'MasterPage.master'. The second line is the <asp:Content> control. The ID of the <asp:contentplaceholder> from the Master Page which is 'ContentPlaceHolder1' must match the ContentPlaceHolderID for our <asp:content> control in the content page, which in this case it does.

<%@ Page Language="VB" MasterPageFile="~/MasterPage.master" Title="Page 1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

<h3>Welcome</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</asp:Content>

Figure 2 shows how the page will display in the browser at run time. The unique content for our file i.e. everything between the <h3> and <p> elements will merge nicely into the contentplaceholder that the Master Page provides.

Figure 2
MasterPages CSS

All we would have to do now is create the remaining 4 pages and add different content to each page and then run the website.

Hopefully this gives you an idea of you can work with CSS layouts and Master Pages to create more complex layouts than the simple layout in this article.

Learn how to create Master Pages with Visual Web Developer

Get the best ASP hosting with DiscountASP.NET - great value, money back guarantee.

Advertisements



MembersPro

MembersPro PayPal - ASP Membership software

Plug and play ASP membership script that integrates with PayPal to let you charge recurring membership fees.

Global ASP.NET Hosting Leader - Click Here