I am a complete noob to CSS...well about 1 day into my CSS career..lol
I have the following code to test setting up a layout that has a header, 3 columns and a footer. Not that this code does that but as you can see from the code that is where I will be going.
<STYLE TYPE="text/css">
#header {
position:absolute;
top:0px;
left:0px;
width:100%;
background:#FFF;
height:60px;
border:1px solid #000;
}
</STYLE>
</head>
<body>
<div id="header"> <h1>LAYOUT TECHNIQUES: 3 columns, the holy grail</h1></div>
</body>
</html>
When I preview the page there is about a 10px gap on the right hand side of the screen. It is really frustrating me as I was thinking I could design my site without tables and get it to cover 100% width.
Does anybody know how to correct this? Am I doing something wrong?you need to set the body not to have any margins or padding:
body {
margin: 0;
padding: 0;
}
Or is that part of the code you haven't posted?Thanks a heap.
That fixed it.
I have the following code to test setting up a layout that has a header, 3 columns and a footer. Not that this code does that but as you can see from the code that is where I will be going.
<STYLE TYPE="text/css">
#header {
position:absolute;
top:0px;
left:0px;
width:100%;
background:#FFF;
height:60px;
border:1px solid #000;
}
</STYLE>
</head>
<body>
<div id="header"> <h1>LAYOUT TECHNIQUES: 3 columns, the holy grail</h1></div>
</body>
</html>
When I preview the page there is about a 10px gap on the right hand side of the screen. It is really frustrating me as I was thinking I could design my site without tables and get it to cover 100% width.
Does anybody know how to correct this? Am I doing something wrong?you need to set the body not to have any margins or padding:
body {
margin: 0;
padding: 0;
}
Or is that part of the code you haven't posted?Thanks a heap.
That fixed it.