ASP.NET Master Page Tutorial Part -6 (Adjusting Div Tags)

In previous post How To Make Master Page in ASP.NET Part -5 (Header Image,Sidebar) Expression Web i show you how to add Header Image and sidebar in ASP.NET website using Microsoft Expression Web.
In this post i show you how to Add main content Div tag and adjusting sidebar Div tag and main content bar Div tag..

Lets Add one anther Div tag inside the main div but outside the sidebar div as shown in picture.

Expression web Master Page tutorials in ASP.NET (Div Tags tutorials)

Select this new Div tag click on "Apply New Style" name this div to #maincontent, set the position in position category .. i set width 585 px.

Expression web Master Page tutorials in ASP.NET (Div Tags tutorials)

Now in Box category set Top margin to 10 px.

Expression web Master Page tutorials in ASP.NET (Div Tags tutorials)


In Layout category set float to "Right" then click ok !!

Expression web Master Page tutorials in ASP.NET (Div Tags tutorials)

Now you can see New Div named #maincontent is added but the sidebar and maincontent div tags are not side by side,both should be side by side for..

Expression web Master Page tutorials in ASP.NET (Div Tags tutorials)

For adjusting both div tags in same line we have to modify these tag
So in Apply style box click on #sidebar then Modify Style as shown in picture.

Expression web Master Page tutorials in ASP.NET (Div Tags tutorials)

In layout category set the float to "Left" as we set on #maincontent div to "Right".

Expression web Master Page tutorials in ASP.NET (Div Tags tutorials)

In Box category set All margins to 10 px,Click Ok !!

Expression web Master Page tutorials in ASP.NET (Div Tags tutorials)

Ahaa haa... Now it looks goods both div tags now in same line.

Expression web Master Page tutorials in ASP.NET (Div Tags tutorials)

We can use this #maincontent div to hold ContentPlaceHolder control,the master page defines content areas using the ContentPlaceHolder control, and the content pages place their content in the areas identified by the ContentPlaceHolder control in the master page.Pages that use a master page to define the layout may place content only in the areas defined by the ContentPlaceHolder.

Next part i will show you in another Asp.Net TutorialASP.NET Master Page Tutorial Part -7 (Adding Navigation Links)..

Share this

Related Posts

There was an error in this gadget