SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question strange margin problem in addition to element's height

    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    It's not clear what you issue is here. Could you say what is actually wrong? Also, just post your code here, inside [code] [/code] tags.

  3. #3
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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%.

    Code:
    <!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. #5
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much!

  6. #6
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by tasoss View Post
    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?
    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).

    Code:
    form {
    	height: 100%;
    	background:red;
    	overflow:auto;
    	width:1200px;
    }
    Just use min-height:100% on the form while removing the height and then it can grow as required.

  8. #8
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again I will try it!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •