2
Hi, I've been looking for answers to this for HOURS. I'm very new to CSS. I've written a code for there to be three columns. a HEADER, MAIN and FOOTER.
I don't want there to be any space between the three of them, yet, I can't seem to figure out how to do this. I've got all my margin's and padding's set to 0. Yet, there's still a space when I view in Firefox.
Here is my css ...
<code>
@charset "utf-8";
body {
background: #666666;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
.oneColLiqCtrHdr #container {
width: 100%;
text-align: left;
margin-top: 0px;
padding: 0;
}
.oneColLiqCtrHdr #header {
background: #ffffff;
margin-top: 0px;
padding: 0px;
position: relative;
margin-bottom: 0px;
}
.oneColLiqCtrHdr #mainContent {
padding: 0px;
background: #FFFFFF;
margin-top: 0px;
position: relative;
margin-bottom: 0px;
}
.oneColLiqCtrHdr #footer {
padding: 0px;
background:#FFFFFF;
margin-top: 0px;
position: relative;
margin-bottom: 0px;
}
</code>
Here is my HTML >>
<code>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Christopher Jeske</title>
<link href="cssFiles/allpages.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
color: #CC66CC;
}
body {
background-color: #D3DC29;
}
a:link {
color: #660033;
text-decoration: underline;
}
a:visited {
text-decoration: underline;
color: #660033;
}
a:hover {
text-decoration: none;
color: #FFFFFF;
}
a:active {
text-decoration: underline;
color: #660066;
}
h1 {
font-size: x-large;
}
h2 {
font-size: large;
}
h3 {
font-size: medium;
}
h4 {
font-size: small;
}
-->
</style></head>
<body class="oneColLiqCtrHdr">
<div id="container">
<div id="header">
<h1>This is the header</h1>
<!-- end #header --></div>
<div id="mainContent">
<h1> Main Content </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna <a href="http://www.hotmail.com">purus</a>, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
<h2>H2 level heading </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<!-- end #mainContent --></div>
<div id="footer">
<p>Footer</p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html></code>
I just can't figure this out.
Basically I just want my DIV'S to be butted up against each other. This is possible is it not? Can someone help?
I WOULD SO MUCH APPRECIATE IT!!!!
