Question by Zeeshan,javed: Using a Master Page to create a 2 column CSS layout?

Best answer:

Answer by Zeeshan Javed
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 control in the page by default.

<%@ Master Language="VB" %>

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" %>

Page 1
Page 2
Page 3
Page 4
Page 5

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 control. The ID of the from the Master Page which is ‘ContentPlaceHolder1′ must match the ContentPlaceHolderID for our control in the content page, which in this case it does.

<%@ Page Language="VB" MasterPageFile="~/MasterPage.master" Title="Page 1" %>

Welcome

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.

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.

Give your answer to this question below!