margin-bottom wont work, background-size: 100%

Question

I want some space between the content area and the end of the browser. But if i give the the elements a margin-bottom it wont work. Here is a picture of the problem I think its a problem with the logo "bastelecke" of the website. Maybe someone of you have an idea to solve the problem.

Here is my Page. I hope its okay if i dont post the code because you cant see the pictures then. Please let me know if you need the code.

Here is the Code:

*{
    margin: 0px;
    padding: 0px;
    color: black;
}

.header{
    background-image: url(Titel.png);
    width: 840px;
    height: 227.5px;
    background-size: 100%;
    margin-right: auto;
    margin-left: auto;
    
}

body{
    background-image: url(bg.jpg);
    height: 100%;
}

section{
    width: 1230px;
    
    margin-left: auto;
    margin-right: auto;
}

article{
    background-color: #FBB9B7;
    width: 800px;
    
    float: left;
    
    padding: 20px;
    
    -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,1);
    -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,1);
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,1);
}

aside{
    background-color: #FBB9B7;
    width: 300px;
    
    float: right;
    
    padding: 20px;
    
    -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,1);
    -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,1);
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,1);
}

.header-sidebar{
    background: url(schleife.png) no-repeat;
    background-size: 100%;
    height: 44px;
    text-align: center;
    padding-top: 6px;
    margin-top: 50px;
    margin-bottom: 20px;
}

.no-margin-top{
    margin-top: 0px;
}

.face-picture{
    float: left;
    width: 200px;
    height: 200px;
    margin: 0px 10px 5px 0px;
}

.link{
    color: #00AFA8;
    text-decoration: none;
}

.link:hover{
    text-decoration: underline;
}

<html>
    <head>
        <link href='index.css' rel='stylesheet' type='text/css'>
    </head>
    
    <body>
        <div class="header">
        </div>
        
        <section>
            <article>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.                 Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna                         aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur                 sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea                     takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero                 eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod                   tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit                   amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea                 rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
            </article>
            
            
            <aside>
                <div class="header-sidebar no-margin-top">
                    Wer bin ich?
                </div>
                <img class="face-picture" src="face.png">
                <p>
                    usto duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt                     ut labore et dolore magna aliquyam erat, sed diam <a href="#" class="link">askasd</a> voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est                     Lorem ipsum dolor sit amet.
                </p>
                
                <div class="header-sidebar">
                    Kategorien
                </div>
                <p>
                    usto duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt                     ut labore et dolore magna aliquyam erat, sed diam <a href="#" class="link">askasd</a> voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est                     Lorem ipsum dolor sit amet.
                </p>
            </aside>
        </section>
    </body>
</html>

Add a bottom margin to your `aside` element. Works for me that way. — Aibrean, Jan 23 '15 at 19:18
Your section block is not getting clear firstly clear it using [clearfix](http://stackoverflow.com/questions/8554043/what-is-clearfix) and then give margin bottom. — BhagyashriK, Jan 23 '15 at 19:30

score 0 · Answer 1 · answered Jan 23 '15 at 19:23

0

section {
margin-bottom: 20px;
}

section:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

Also you can remove height: 100%; from the body tag, it's not necessary.

answered Jan 23 '15 at 19:23

chrisbedoya

820
7
22

No... I cant see the box-shadow then – Skeptar Jan 23 '15 at 19:35
If you add the section:after code, it'll work. @Skeptar – chrisbedoya Jan 23 '15 at 19:43

Dustin Scott Garza · Answer 2 · 2015-01-23T20:12:28.197

0

slightly altering @chrisbedoay code, I would suggest

section {
padding-bottom: 20px;
overflow: auto; <!-- HERE IS THE DIFFERENCE -->
}

/=== EDIT ===/

Just occured to me that you could add padding to your body

body{
padding:0px 0px 30px 0x; <!-- allows extra space at bottom of page -->
}

edited Jan 23 '15 at 20:12

answered Jan 23 '15 at 19:29

Dustin Scott Garza

130
9

No... I cant see the box-shadow then – Skeptar Jan 23 '15 at 19:34

margin-bottom wont work, background-size: 100%

2 Answers2