0

I have two divs..

CSS

#content {
    background: url('../images/bg.jpg') no-repeat left;
    width: 100%;
    height: 811px;
}
#welcome {
    background: #fff;
    width: 600px;
    height: 50px;
    color: #000;
    margin-top: 200px;
}

HTML

<div id="content">
    <div id="welcome">
        this is welcome
    </div>
</div>

The margin is moving parent div, not inside one. I also tried to give padding to parent div, same thing. How to solve?

Michael Irigoyen
  • 22,513
  • 17
  • 89
  • 131
Tigran
  • 632
  • 1
  • 5
  • 21
  • 1
    possible duplicate of [Margin-Top push outer div down](http://stackoverflow.com/questions/2680478/margin-top-push-outer-div-down) – nalply May 14 '13 at 19:43
  • add a float element for example `float: left;` – meda May 14 '13 at 19:44
  • 1
    This is classic example of collapsing margins... see reference posted by @nalply – Marc Audet May 14 '13 at 19:54
  • And this question gets the same answers as its duplicate... :-/ – nalply May 14 '13 at 20:07
  • 2
    I suspect that if you know about collapsing margins, you would probably not have this issue in the first place. If you have the issue, but you don't know the name of it, you can't find the answer because you don't know which question to ask... a Catch-22 situation. – Marc Audet May 14 '13 at 20:10

2 Answers2

2

try adding overflow:hidden; to the parent

#content{
  background:url('../images/bg.jpg') no-repeat left;
  width:100%;
  height:811px;
  overflow:hidden;
  border: 1px solid; /*remove*/
}
#welcome {
  border: 1px solid; /*remove*/
  background:#fff;
  width:600px;
  height:50px;
  color:#000;
  margin-top:200px;
}

here you have the example:

http://jsfiddle.net/JmBj9/

(i added the borders so you can see it)

MCSI
  • 2,818
  • 26
  • 35
1

Try having overflow:auto;

#content{
background:url('../images/bg.jpg') no-repeat left;
width:100%;
height:811px;
overflow:auto;
}
#welcome {
background:#fff;
width:600px;
height:50px;
color:#000;
margin-top:200px;
}
moto
  • 194
  • 3
  • 13