Margin top move all my content

Question

i have this html

<body id="page-id-login" class="">
<div id="viewport" data-am-control="vertical-layout" >
    <div id="container_buttons" data-am-control="vertical-layout" >
        <button class="item_vertical btn" >Twitter dinámico</button>
        <button class="item_vertical btn">Spinner simple</button>
        <button class="item_vertical btn">Spinner personalizado</button>
    </div>
</div><!-- END VIEWPORT-->

</body>

and this CSS

#viewport{
width: 480px;
height: 600px;
background: linear-gradient(#a8a8a8, #ebebeb);
}

#container_buttons{
padding: 0 10px;
}

.item_vertical{
display:inline-block;
}

.btn{
font-size: 20px;
color: white;
width: 100%;
padding-top: 5px;
padding-bottom: 5px;
background: linear-gradient(#0088cc, #0044cc);
border-style: solid;
border-width: 1px;
border-color:  #0044cc;
border-radius: 5px;
margin-top: 20px;
}

.btn:active{
background: linear-gradient(#0044cc, #0044cc);
border-style: solid;
border-width: 1px;
border-color:  #0044cc;
border-radius: 5px;
}

with this i see this:

http://img805.imageshack.us/img805/3980/capturadepantalla201305i.png

If i add to #container_buttons this:

#container_buttons{
margin: 60px;
padding: 0 10px;
}

the margin-top move all content (and not only the div #container_buttons) like you can see in this image (above there is blank space)

http://img20.imageshack.us/img20/6738/capturadepantalla201305iz.png

So... is there any way that margin only move div with id="container_buttons"?

Thanks!!

This is probably relevant to understand how margins work: http://stackoverflow.com/questions/1394724/css-margin-top-when-parents-got-no-border — technophobia, May 30 '13 at 16:36

score 2 · Accepted Answer · edited May 23 '17 at 11:50

2

Your margins are collapsing, here's how to fix it:

#viewport {
    overflow:auto;
}

Source: CSS: Margin-top when parent's got no border

Reference: http://www.w3.org/TR/CSS2/box.html#collapsing-margins

edited May 23 '17 at 11:50

Community

1
1

answered May 30 '13 at 16:44

technophobia

2,644
1
20
29

1

As simple as it gets, great solution. – Dryden Long May 30 '13 at 16:45

score 0 · Answer 2 · answered May 30 '13 at 16:43

You have to do something like this:

#viewport{
width: 480px;
height: 600px;
background: linear-gradient(#a8a8a8, #ebebeb);
}

#container_buttons{
    padding-top:10px;
    margin: 10px;
}

.item_vertical{
display:inline-block;
}

.btn{
    margin-bottom: 10px;
font-size: 20px;
color: white;
width: 100%;
background: linear-gradient(#0088cc, #0044cc);
border-style: solid;
border-width: 1px;
border-color:  #0044cc;
border-radius: 5px;
}

.btn:active{
background: linear-gradient(#0044cc, #0044cc);
border-style: solid;
border-width: 1px;
border-color:  #0044cc;
border-radius: 5px;
}

The result is now correct. I changed all padding and margin options because they were a little bit mixed up. Here is a fiddle of an example.

Margin top move all my content

2 Answers2