<HTML>
<Head>
<Title> freelayout.html </title>
<Style type = "text/CSS">
*{
Margin: 0;
Padding: 0;
}
Body {
Text-align: center;
Padding: 10px;
}
# Wrapper {
Width: 100%;
Margin: 0 auto;
Text-align: left;
Background: # efefef URL (image/fside.jpg) Repeat-y 70% 0;
}
# Header {
Height: 120px;
Background-color: #26 efef;
}
# Main {/* Note that this element has no effect for the moment because more windows are used */}
# Content {
Float: left;
Width: 70%;
Background-color: # efef9a;/* I added a background to make it easier to see the problem */
}
# Sidebar {
Float: right;
Width: 30%;
Background-color: #8 faebe;
}
# Footer {
Clear: left;
Height: 80px;
Background-color: # 688b9a;
}
# Innerheader, # innercontent, # innersidebar, # innerfooter {
Padding: 10px;
}
</Style>
</Head>
<Body> <Div id = "wrapper">
<Div id = "Header">
<Div id = "innerheader"> page header </div>
</Div>
<Div id = "Main">
<Div id = "content">
<Div id = "innercontent"> body content </div>
</Div>
<Div id = "sidebar">
<Div id = "innersidebar"> Sidebar of the subject </div>
</Div>
</Div>
<Div id = "footer">
<Div id = "innerfooter"> bottom of the page </div>
</Div>
</Div>
</Body>
</Html>
