Strange margin problem in addition to element's height

HTML & CSS
1

Hello.
I have a very strange problem.I Suppose this is something simple that i have never learnt.
Here is the html http://pastebin.com/NfHRqvUp
and this is the css http://pastebin.com/TMitgN0H
Open the page and inspect body element with firebug or whatever dev tools you are using.
My problem can be described by this image http://s16.postimg.org/tojsotb79/cssmargin3.jpg
I suppose it has to do with how margins are calculated related to parent elements.
I tried to understand this behavior through http://www.w3.org/TR/CSS2/box.html#margin-properties but i didn’t.
So any advice on what to read or why this happens would be appreciated.
Thank you.

2

It’s not clear what you issue is here. Could you say what is actually wrong? Also, just post your code here, inside [noparse]

[/noparse] tags.

3

Thanks for replying.In the image that i have included you can see that body doesn’t get 100%.In the top you can see the margin of #siteArea.This can be corrected with those that i mention in the image(adding border or an element).
If it is still unclear what the problem is please let me know.The blue color that you see in the picture in hovering body in firebug.

4

Hi,

The problem you are seeing is one of margin-collapse and the margin of #siteArea collapses onto the parent form element and pushes the form element down the page as it becomes a margin on the form element instead.

You could instead just use 50px padding-top on siteArea and avoid the issue. There are other things you could do depending on the structure to avoid margin-collapse and they are explained in the link above but the easiest in your example is just to use some padding-top to get the space you want.

As an aside you can’t use height:100% on your form element because that means it will never grow. As an example see the following code and you can see the content just spills out of the red background once it is greater than 100%.


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script defer src="../js/jquery-2.0.0.js"></script>
<link href="css/masterPage.css" rel="stylesheet" />
<style type="text/css">
html { height: 100%; }
form {
	height: 100%;
	background:red
}
body {
	/*border: 1px solid #ff0000;*/
    height: 100%;
	margin: 0px;
	padding: 0px;
	background-color: #2E2622;
}
#siteArea {
	margin:0 auto 50px;
	padding-top:50px;
	border: 1px solid #f00;
	width: 980px;
	text-align:left;
}
</style>
</head>
<body>
<form method="post" action="./" id="form1">
		<div class="aspNetHidden">
				<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="wTPvTGadwrGM8ajHGhklxBamn6AyaE4+gS9A73fRHqBiAFYjWZGZOsYdIrVffRh6JFceUz+HB85ciLqSCkmqUt44TnLGQ80u8gshAcrTOc0=" />
		</div>
		<div id="siteArea">
				<div>
						<div style="height:20px;border:1px solid #0000ff"> lalal </div>
						xxxxxxxxxxxxxxxxxxTas
						Welcome!gg </div>
		</div>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
</form>
</body>
</html>

You could instead use min-height:100% on the form element but it would need to hold all your content. (See the CSS faq on 100% height for a more thorough description.)

5

Thank you very much!

6

One more question regarding height 100%.If i set overflow:auto to form i have a nice result(using your sample html with a lot of p elements).Is it wrong?

7

Hi,

It all depends on the context but as a general rule you don’t want a scrollbar on inner elements like that because they won’t behave in the same way that a scrollbar on the viewport will. For example if you have a fixed width then you will lose the vertical scrollbar access unless you first scroll to see it which is a real pain (and in IE7 you get two vertical scrollbars unless you hide the html and body ones first).


form {
	height: 100%;
	background:red;
	[B]overflow:auto;
	width:1200px;
}[/B]

Just use min-height:100% on the form while removing the height and then it can grow as required.

8

Thanks again I will try it!