Re: Padding at top of container, how to eliminate it ???

Respond to this post
Return to posts index
Read entire thread
Here's the link:

http://www.chipthome.com/padded_page.html


Now to see if I can paste the code correctly this time.  :-)



<!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>Untitled Document</title>

<style type="text/css">

<!--

body {

	font: 100% Verdana, Arial, Helvetica, sans-serif;

	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */

	padding: 0;

	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */

	color: #000000;

	background-color: #000;

}

.oneColFixCtr #container {

	width: 780px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */

	background: #FFFFFF;

	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */

	border: 1px solid #000000;

	text-align: left; /* this overrides the text-align: center on the body element. */

}

.oneColFixCtr #mainContent {

	padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */

	background-color: #000;

}

-->

</style></head>



<body class="oneColFixCtr">



<div id="container">

  <div id="mainContent">

    <h1> Main Content </h1>



    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliq......., nibh.  Donec nec libero.</p>

    <h2>H2 level heading </h2>

    <p>Lorem ipsum.......in, vulputate at, odio.</p>

	<!-- end #mainContent --></div>

<!-- end #container --></div>

</body>

</html>