This is copy and paste example. Create simple html page and then use stylesheet listed below.
1. In your aspx add the following <div> elements:
<body><form id="form1" runat="server">
<div id="PageWrapper">
<div id="Header">
Header Goes Here
</div>
<div id="MenuWrapper">
Menu Goes Here
</div>
<div id="MainContent">
Main Content goes here
</div>
<div id="Sidebar">
Sidebar Goes Here
</div>
<div id="Footer">
Footer Goes Here
</div>
</div>
</form>
</body>
2. Create css like this:
#PageWrapper
{
width: 844px;
}
#Header
{
background-color: #C0C0C0;
width: 844px;
height: 86px;
}
#MenuWrapper
{
width: 844px;
}
#MainContent
{
width: 664px;
float: left;
}
#Sidebar
{
background-color: Gray;
width: 180px;
float: left;
}
#Footer
{
background-color: #C0C0C0;
width: 844px;
clear: both;
}
Note that MainContent and SideBar are on the same line.
Also note that clear: both; declaration will clear left and right floats.
No comments:
Post a Comment