Wednesday 24 April 2013
CSS - clear: both example
Watch this example on YouTube:
This is ready to copy and paste example
Try it with clear: both; and without to see the difference
Without clear:both footer will overlap with #MainContent
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<style type="text/css">
#PageWrapper
{
width: 844px;
}
#Header
{
background-color: Red;
width: 844px;
height: 86px;
}
#MenuWrapper
{
width: 844px;
}
#MainContent
{
width: 664px;
float: left;
}
#Sidebar
{
background-color: Gray;
width: 180px;
float: left;
}
#Footer
{
background-color: Red;
width: 844px;
clear: both;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="PageWrapper">
<div id="Header">
This is header
</div>
<div id="MenuWrapper">
This is menu
</div>
<div id="MainContent">
This is main content
</div>
<div id="Sidebar">
This is sidebar
</div>
<div id="Footer">
This is footer
</div>
</div>
</form>
</body>
</html>
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment