I am trying to learn designing with div tags and css styles but I cant seem to get my sections to flush together without any spaces in between. Can someone help me design a simple layout that has a header, left column, and a content area that are all center aligned touched together without any spaced in between layouts?
web page code:
<html xmlns=" >
<head id="Head1" runat="server">
<title>Untitled Page</title>
<link href="WebSiteVB/DIVLayout4.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main">
<form id="form1" runat="server">
<div id="header" >Header
</div>
<div id="leftcolumn">Left Column
</div>
<div id="content">Content
</div>
</form>
</div>
</body>
</html>
css style sheet:
#main
{
width: 900px;
height: 800px;
margin: 0px auto 0px auto;
padding: 0px;
border-right: silver thin solid;
border-top: silver thin solid;
border-left: silver thin solid;
border-bottom: silver thin solid;
}
#header
{
padding: 0px;
width: 900px;
height: 170px;
background-image: url(WebSiteVB/images/topbg1.png);
background-color: gray;
}
#leftcolumn
{ top:0px;
background: #f00;
float:left;
width:100px;
height:600px;
padding: 0px;
}
#content
{
background: #fff;
top:0px;
width:60%;
height:50%;
padding: 0px;
}
web page code:
<html xmlns=" >
<head id="Head1" runat="server">
<title>Untitled Page</title>
<link href="WebSiteVB/DIVLayout4.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main">
<form id="form1" runat="server">
<div id="header" >Header
</div>
<div id="leftcolumn">Left Column
</div>
<div id="content">Content
</div>
</form>
</div>
</body>
</html>
css style sheet:
#main
{
width: 900px;
height: 800px;
margin: 0px auto 0px auto;
padding: 0px;
border-right: silver thin solid;
border-top: silver thin solid;
border-left: silver thin solid;
border-bottom: silver thin solid;
}
#header
{
padding: 0px;
width: 900px;
height: 170px;
background-image: url(WebSiteVB/images/topbg1.png);
background-color: gray;
}
#leftcolumn
{ top:0px;
background: #f00;
float:left;
width:100px;
height:600px;
padding: 0px;
}
#content
{
background: #fff;
top:0px;
width:60%;
height:50%;
padding: 0px;
}
