CODEWITHSUNDEEP
htmlcsswhitespacemargin
user1777039
user1777039

Reputation: 57

Whitespace at the end of the HTML

I am trying to do a dynamic grid layout with links to other pages, consisting of a picture and a text. The problem is that I don't seem to find any way of introducing a whitespace (padding/margin) after the grid layout. In other words, The page ends exactly where the main div ends.

Here is the code. Any help is greatly appreciated, as I have tried a lot of methods, and neither one of them worked. Thanks a lot.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <link rel="stylesheet" type="text/css" media="screen" href="resources/index.css" /> 
</head>

<body>

    <div class="header"></div>

        <div class="body">

                             <!-- this is the standard link to each category, which will be inserted n times .. the problem is visible after inserting it a min of 12 times-->
            <a href="" class="categorie">
                    <img src="imgs/asd.png" class="imagine"/>
                <div class="nume">  </div>
            </a>            

        </div>

</body>

</html>

CSS : 

html
    {
    background-color:Grey;
    height:auto;
    }
body
    {
    display: table; 
    padding:20px;
    margin: 0 auto;  
    height:100%;
    }
.header
    {
    background-color:white;
    width:700px;
    margin-left:auto;
    margin-right:auto;
    margin-top:40px;
    height:75px;
    }
.body, .body>html
    {
    background-color:black;
    width:700px;
    margin-top:5px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:20px;
    padding-bottom:20px;
    position:absolute;
    display:block;
    height:auto;
    }
.categorie
    {
    background-color:white;
    margin-left:20px;
    float:left;
    margin-top:20px;
    height:180px;
    width:150px;
    }
.imagine
    {
    width:150px;
    height:150px;
    }
.nume
    {
    background-color:green;
    width:150px;
    height:30px;
    margin-top:-5px;
    }

Upvotes: 1

Views: 1696

Answers (2)

Artsen
Artsen

Reputation: 188

I'm not sure exactly why there was a display: table on the body element, you said:

"Because I use position:absolute in the .body class.. otherwise, the .body will not extend to encapsulate all of the links."

So I was able to remedy both problems by removing both the display: table from the body element and position: absolute from the body class, then added overflow: auto to the body class.

The CSS:

body{
  padding:20px;
  margin: 0 auto;  
  height:100%;
}
.body, .body>html {
  background-color:black;
  width:700px;
  margin-top:5px;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:20px;
  padding-bottom:20px;
  display:block;
  height:auto;
  overflow: auto;
}

The JSFiddle: http://jsfiddle.net/Artsen/VhSdg/

Upvotes: 1

webketje
webketje

Reputation: 10976

Here is a working fix, in case for some reason, you'd want to keep the body table display. http://jsbin.com/agucar/2/edit

First change 

.body, .body>html
    {
    position:absolute;
    }

to 

.body /* removing .body>html didn't change a thing, meaning it was useless */
     {
     float: left;
     }

That way you will be able to clear the floats with a clearfix div (as if correctly relatively positioned) and if you keep your clearfix div transparent, the height you give it will serve as "margin".

Add <div id="clearfix"></div> after <div class="body"></div>, and give the clearfix this CSS: 

#clearfix {
  height: 20px;
  width: 100%;
  position: relative;
  clear: both;
}

EDIT: Artsen's answer works too, and if you don't need to keep the .body {display: table}, his answer is more suited.

Upvotes: 0

Related Questions