Reputation: 63

CSS positioning and clearfix

When I wrote website template I had frustrating problem with positioning. When i use relative positioning to move higher last element of the page, on the bottom I had empty space. For example:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="main.css" />
        <title>Clearfix test</title>
    </head>
    <body>
        <header>a</header>
        <div id="pageWrapper">
            <div id="page"></div>
        </div>
        <!--<footer></footer>-->
    </body>
 </html>

* {
    margin-left: auto;
    margin-right: auto;
    background: white;
 }
body {
     background: grey;
     padding: 0;
     margin: 0;
 }

header {
     width: 900px;
     height: 150px;
     border: 1px solid red;
}

 #pageWrapper {
     position:relative;
     width: 850px;
     height: 600px;
     top: -40px;
     border: 1px solid green;
 }

 #page {
     position:absolute;
     top: 25px;
     left: 25px;
     border: 1px solid darkgoldenrod;
     height: 550px;;
     width: 800px;
 }

There is any way to remove this empty area at page bottom ? I was trying to use clearfix but without any luck.

Upvotes: 0

Answers (3)

Nayana Adassuriya

Reputation: 24766

Try this way.

*{
        padding: 0;
        margin: 0;   
     }
    body {
         background: grey;     
     }
    #container{
        width: 900px;
        margin:0px auto;
    }
    header {
         width: 900px;
         height: 150px;
         border: 1px solid red;
    }

     #pageWrapper {
         width:800px;
         padding:40px;
         margin:0px auto;    
         border: 1px solid green;
         margin-top:-40px;
     }

     #page {
         border: 1px solid darkgoldenrod; 
         height:500px;
     }

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="main.css" />
        <title>Clearfix test</title>
    </head>
    <body>
       <div id="container">
        <header>a</header>
        <div id="pageWrapper">
            <div id="page"></div>
        </div> 
        </div>      
    </body>
 </html>

Upvotes: 0