Forum Moderators: not2easy
Html file with external link
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<TITLE>Basic Two Culomn Layout with left Menue</TITLE>
<link rel="stylesheet" type="text/css" href="TwoColumnLeftMenuHeader.css"/>
</HEAD>
<BODY>
<div id="header''>
<p>Your header will go here. You can place images, text links, etc. in this div. To change
the properties of this div you can change the #header selector in the style sheet that is
located on this page between the head tags.</p>
</div><!---header--->
<div id="left">
<p>Menu</p>
<p>Menu</p>
<p>Menu</p>
</div>
<div id="center">
<p>All of your content goes in this div. This side is fluid so that if the window is collapsed,
your div will collapse also and fit the screen perfectly. To change the properties of this
div you can change the #content selector in the style sheet that is located on this page
between the head tags.</p>
</div><!-------Content--->
</BODY>
</HTML>
Here is my .css file
body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
#header {
margin: 20px;
padding: 10px;
height: 100px;
}
#left {
position: absolute;
left: 15px;
top: 160px;
width: 200px;
}
#center {
top: 0;
margin-left: 230px;
margin-right: 15px;
}
A few things:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<link rel="stylesheet" type="text/css" href="TwoColumnLeftMenuHeader.css"/>
Your CSS can be written for more compact:
body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
body {
margin: 0;
padding: 0;
}
Hope this helps you, also do try to validate your HTML and CSS.
