<div> margin also drags down the containing <div>

Discussion in 'CSS' started by Enmar, Jul 4, 2009.

0
  1. #1
    Hey guys, this is probably something really easy and super basic/simple but I just don't know how to fix it. When I drop the margin on a div inside of the <content> div, the <content> div drops as well.

    Problem:
    [​IMG]
    http://img43.imageshack.us/i/halpme.png/ if it doesn't show

    CSS:

    body	{
		background: #432b1b;
}

#container	{
		width: 800px;
		margin: 0px auto;
}
		

#header	{
		background: url(images/img_03.png);
		height: 156px;
}

#content {
		background: #f3f3f3;
		width: 800px;
}

#img1{
	background: url(images/img_09.png) no-repeat;
	height: 174px;
	width: 200px;
	margin-top: 25px;


}

#footer {
		background: url(images/img_17.png);
		height: 201px;
		width: 100%;
		
}
    Code (markup):
    HTML:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html>


<head>


<title>Test Theme, Sir.</title>

<link href="base.css" rel="stylesheet" type="text/css"/>

</head>


<body>

<div id="container">
	<div id="header"></div>
	
	<div id="content">
		
		<div id="img1"></div>
		<div id="txt1"></div>
	
	</div>
	
	<div id="footer">
	</div>
</div>

	

</body>


<html>
    HTML:
    I'm going to sleep so hopefully there'll be a response by morning. Thanks in advance.
     
    Enmar, Jul 4, 2009 IP
  2. justinlorder

    justinlorder Peon

    Messages:
    4,160
    Likes Received:
    61
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Don't drop the margin of the <DIV> tag,
    try to set zero value to the margin property .
     
    justinlorder, Jul 5, 2009 IP
  3. Enmar

    Enmar Active Member

    Messages:
    177
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    60
    #3
    Perhaps I should have been clearer. What I meant was, I need the div with the id "img1" to drop down 25 pixels, but I don't want the div with the id "content" to also drop down.

    <div id="content">
<div id= "img1"></div>
</div>
    HTML:
    #content {
		background: #f3f3f3;
		width: 800px;
}

#img1{
	background: url(images/img_09.png) no-repeat;
	height: 174px;
	width: 200px;
	margin-top: 25px;
}
    Code (markup):
    For some reason, the margin-top: 25px; not only drops the img1 div, but it also drops the content div. The rest of the HTML/CSS are in the original post if it's something there.
     
    Enmar, Jul 5, 2009 IP
  4. dgryan

    dgryan Peon

    Messages:
    47
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    try using padding, instead of margins.

    I have the same problem when putting info inside a certain div.
     
    dgryan, Jul 6, 2009 IP
  5. Domster

    Domster Greenhorn

    Messages:
    34
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    18
    #5
    Another 2 ways of looking at it:

    1. Replace the #img1 padding:25px with a border-top: 25px...

    or 2. Wrap the #img1 with another DIV and add the 25px padding to that new div.
     
    Domster, Jul 7, 2009 IP
  6. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #6
    I'd use top-padding on the #content box to push things inside down.

    What you are getting right now is actually correct. Google "margin collapse". One of the things with margin collapse is parents can get their children's margins, which is what's happening here (your #img1's top margins are being given to the #content box).

    Margin collapse can be stopped with an application of just 1px of padding, so if you don't want everyone inside #content to be pushed down as far as #img1 then try giving #img1 just one pixel of padding. This might not look good to you so I think you could also try the 1px on #content instead. Just top-padding since the top is where the margins are collapsing.

    BTW I'll bet Ursula Vernon would think your avatar is super neat-o : )
     
    Stomme poes, Jul 9, 2009 IP