Home/ Questions/Q 8716401
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T06:04:10+00:00

I am new to CSS so please don’t be to harsh on me. I

  • 0

I am new to CSS so please don’t be to harsh on me. I am trying to place the yellow background DIV right below the “Header” DIV, but for some reason, it seems to place a padding before and after and I don’t really understand why. If I remove the list, than the problem disappears.

This is the HTML code:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS</title>
<link rel = "stylesheet" type="text/css" href="css.css" />
</head>
<body>
<div id="headerDiv">
    <p>Header</p>
</div>
<div id="listDiv">
    <ul>
<li>Menu item 1</li> 
      <li>Menu item 1</li> 
      <li>Menu item 1</li> 
      <li>Menu item 1</li> 
    </ul>
</div>
<div id="mainviewDiv">
Main View
</div>
<div id="footerDiv">
Footer
</div>

</body>

And this is the CSS:

@charset "utf-8";
/* CSS Document */

div#headerDiv { background-color:#F00;
         height:100px;
         position:relative;
         }

div#listDiv {background-color:#FF0;
        }

div#listDiv ul {list-style-type:none;}

div#listDiv li { display:inline;}

div#mainviewDiv {background-color:#060;}

div#footerDiv {background-color:#999;}

enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I don’t know if you have tried this, but adding this to the top of your CSS file might help you out:

    *{
    margin:0;
    padding:0;
}

    But when you publish your website use Eric Myers CSS reset

    And like Maxime Morin said, you might want to check out http://nicolasgallagher.com/about-normalize-css/

    • 0