Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    Dec 2009
    Posts
    108
    Thanks
    22
    Thanked 2 Times in 2 Posts

    "clear: both" div cannot display top margin properly~~~~

    a div with id="wrapper" has a fixed width and another div id="content" has the style float:right (it doesn't have a fixed height cos we don't know how many words will be put here currently); then the last div ( id="footer ) don't want to follow the flow so make it --> clear: both

    then strange things happen:

    if you set the #footer with " margin-top: 100px;" it cannot display that margin properly. With the help of Dreamweaver, it shows that that margin 'overlaps' the content part ---- strange ~~~

    so anyone could help with it?

    thanks a lot.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,858
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    if you set the #footer with " margin-top: 100px;" it cannot display that margin properly. With the help of Dreamweaver, it shows that that margin 'overlaps' the content part ---- strange ~~~

    so anyone could help with it?
    Please post your complete code or a link to your page.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello mehere8,
    I took the liberty of creating a demo. I've run into this before and solved it either by
    putting #footer outside of #wrapper
    putting margin-bottom on the tallest div contained in #wrapper

    I'd be curious to see what anyone else knows about this though. It doesn't appear to be uncollapsing margin...

    Demo:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	font: 100% "Comic Sans MS";
    	background: #FC6;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: 0;
    }
    #wrapper {
    	width: 800px;
    	margin: 30px auto;
    	background: #999;
    	overflow: auto;
    	font-size: 0.8em;
    }
    #content {
    	width: 500px;
    	float: right;
    	background: #ccc;
    }
    #footer {
    	height: 20px;
    	margin: 100px 0 0 0;
    	clear: both;
    	background: #00f;
    }
    </style>
    </head>
    <body>
        <div id="wrapper">
        	<div id="content">
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
    		<!--end content--></div>
                <div id="footer"></div>
        <!--end wrapper--></div>
    </body>
    </html>
    It seems when #content is floated it is taken out of the normal flow of the document. That's why we need to clear our floats and why it doesn't give #footer's margin-top anything to act on.

    When you go further in development, adding more elements and content, it could be this will be avoided.
    Have a look at this demo and what happened when you add margin-top:100px; to it's footer. It works now because the floated element is not the tallest one so #footer's margin has something to push off of.

    I don't really know of any other fix, though I have demonstrated 3 here that work.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    mehere8 (01-12-2010)

  • #4
    Regular Coder
    Join Date
    Dec 2009
    Posts
    108
    Thanks
    22
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by abduraooft View Post
    Please post your complete code or a link to your page.
    something like this:

    Code:
    <style>
    #wrapper{ width:960px; margin:0,auto;}
    #content{ width:600px; float:right;}
    #footer{ clear:both; margin-top: 100px;
    /* 100px is just used to see the result clearly*/}
    </style>
    
    <!-- the following is copied from Excavator   thanks for his typing( just like this)-->
    <body>
        <div id="wrapper">
        	<div id="content">
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
    		<!--end content--></div>
                <div id="footer"></div>
        <!--end wrapper--></div>
    </body>
    and that margin-top of the #footer is useless

  • #5
    Regular Coder
    Join Date
    Dec 2009
    Posts
    108
    Thanks
    22
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by Excavator View Post
    Hello mehere8,
    I took the liberty of creating a demo. I've run into this before and solved it either by
    putting #footer outside of #wrapper
    putting margin-bottom on the tallest div contained in #wrapper

    I'd be curious to see what anyone else knows about this though. It doesn't appear to be uncollapsing margin...
    actually i doubt that this problem arises from collapsing margin but it doesn't.
    maybe it is caused by "clear: float;" this property

    your method -- adding margin-bottom to the upper div is useful but i am still confused why the margin-top of #footer is useless~~~

  • #6
    New Coder
    Join Date
    Dec 2009
    Posts
    13
    Thanks
    4
    Thanked 0 Times in 0 Posts
    This link might help: http://www.brunildo.org/test/margins_clear.html Situation similar to 1.1

    Not sure what's causing it, but if you add borders on all div and play with margin you'll notice that when applying margin-top, it applies to the top of the wrapper and not on the bottom of content div.
    So if you apply a margin-top height higher than the content height, you'll see some gap.
    Last edited by mobotech; 01-10-2010 at 07:24 AM.

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by mehere8 View Post
    actually i doubt that this problem arises from collapsing margin but it doesn't.
    Like I said, the problem is not collapsing margin.
    maybe it is caused by "clear: float;" this property
    No such thing. It is not caused by clear:both; in the footers styling either.
    your method -- adding margin-bottom to the upper div is useful but i am still confused why the margin-top of #footer is useless~~~
    I showed two other solutions as well. Did you see if either of those would work for you?

    I'm pretty sure this is why it's happening, even though I'm sure someone else can explain it better:
    It seems when #content is floated it is taken out of the normal flow of the document. That's why we need to clear our floats and why it doesn't give #footer's margin-top anything to act on.
    Last edited by Excavator; 01-10-2010 at 09:19 AM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    Regular Coder Candygirl's Avatar
    Join Date
    Apr 2008
    Location
    Switzerland
    Posts
    184
    Thanks
    3
    Thanked 56 Times in 56 Posts
    Hello,

    I'll try to explain what I've understand about this case:

    Quote Originally Posted by Excavator View Post
    putting #footer outside of #wrapper
    Just notice that this will work only if #wrapper has a property that establish a new block formatting contexts (here, you have the overflow:auto)

    Quote Originally Posted by Excavator View Post
    putting margin-bottom on the tallest div contained in #wrapper
    I'd give the margin-bottom to all the containers in case of one is tallest then the other on an other page.

    Quote Originally Posted by Excavator View Post
    It seems when #content is floated it is taken out of the normal flow of the document.
    I agree regarding of the css 2.1 candidate recommendation:
    Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist.
    Quote Originally Posted by Excavator View Post
    [...] it doesn't give #footer's margin-top anything to act on.
    The margin-top does actually act but, ignoring the float, from the current-line witch is on the top of #wrapper in your demo. If we give a very hight margin-top, higher that the content's high, we can see it acts.

    An other way to solve this isue is to float the footer (float:left;width:100%; ). The margin will then be calculated from the floats (or regular content) above and not anymore from the curent-line of the normal flow.
    Last edited by Candygirl; 01-10-2010 at 07:19 PM.
    "Imagination was given to man to compensate for what he is not;
    a sense of humour to console him for what he is."
    -Francis Bacon

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Candygirl View Post
    An other way to solve this isue is to float the footer (float:left;width:100%; ). The margin will then be calculated from the floats (or regular content) above and not anymore from the curent-line of the normal flow.
    Good catch Candygirl, I count 4 solutions now.
    That does solve the problem but I always cringe at floating full width elements. That's just a personal thing though, I doubt there's anything wrong with doing it that way.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    Regular Coder
    Join Date
    Dec 2009
    Posts
    108
    Thanks
    22
    Thanked 2 Times in 2 Posts
    another method from Excavator is great:

    make another wrapper to wrap the content and the left column then there is no need to set footer clear:both

    thanks, all guys


  •  

    Posting Permissions

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