Home/ Questions/Q 9199375
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T22:31:21+00:00

I made this simple 3 part css layout, but it’s not behaving like it

  • 0

I made this simple 3 part css layout, but it’s not behaving like it should.

CSS

#main-container {
    width: 1000;
    margin: 0 auto;
    height:100%;
}

.header{ 
    background-color:black; 
    width:100%; 
    height:150px;
}

.headertext{
    color:#A3BB02;
    font-size: xx-large;
}

.contenu{ 
    width:100%; 
    background-color:#A3BB02;  
    }

.footer{ 
    width:100%; 
    background-color:black; 
    min-height:100px; 
    }

Html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Intro Projet Cloud</title>
    <link href='/css/design.css' rel='stylesheet' type='text/css' />
  </head>

  <body>
    <div id="main-container">
        <div class="header">
            <br/><br/><br/>
            <span class="headertext">blablabla</span>
        </div>
        <div class="contenu">
            <p>
                blabla
            </p>
            <p>
                blabla
            </p>
            <p>
                blabla
            </p>
            <p>
                <a href="projetcloudm2">Acceder a l'application</a>
            </p>
        </div>
        <div class="footer"></div>
    </div>
  </body>
</html>

result
result

Where does the white bar betwen contenu and the header and footer come from?
There is no margin in may css.

Please note, that this is done with google app engine in eclipse doing a web project

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Paragraphs have a margin on them by default (usually 1em 0). Add this to your styles to reset it:

    p {
  margin: 0;
}

    See DEMO.

    • 0