CODEWITHSUNDEEP
htmlcssmargin
kaputu
kaputu

Reputation: 141

div inherits margin-top to its parent, instead inside the parent

I have a div layout and a div with a margin-top hasn't got a margin-top to its parent, but the parent now has a margin-top. How can I make the div class=box_container again align with the div class=container above it?

jsfiddle

HTML

        <div class="right">
        <div class="container">
        </div>
        <div class="box_container">
            <div class="boxwrap">
                <div class="box" ></div>    
                <div class="box" ></div>    
                <div class="box" ></div>    
                <div class="box" ></div>    
            </div>
        </div>
    </div>

CSS

.right{
height: 100%;
width: 250px;
background-color: blue;
position:relative;
float: right;
}

.container{
height: 225px;
width: 250px;
background-color: lightsteelblue;
}

.box_container{
height: 140px;
width: 250px;
background-color: darkslategray;
clear: both;
}


.boxwrap{
width: 245px;
height: 50px;
margin-left: 5px;
margin-top:20px;
clear: both;
}

.box{
height: 50px;
width: 50px;
margin-left: 5px;
margin-right: 5px;
float: left;
background-color: red;
}

Upvotes: 0

Views: 1381

Answers (2)

ralph.m
ralph.m

Reputation: 14365

This is known as "margin collapse". The easy solution here is to use padding-top instead, but when that's not appropriate, you can stop the margin hanging out of the container by giving the container a top border or some top padding. E.g.

.box_container {
    padding-top: 1px;
}

Upvotes: 1

skip405
skip405

Reputation: 6289

Try using padding instead of the margin - is that what you need? Have a look at this fiddle - http://jsfiddle.net/skip405/ALuqW/

Upvotes: 0

Related Questions