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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts

    p element pushing footer set to clear:both away from floating divs?

    I have a pretty basic layout, a maincontent area with a repeating background pattern so it always extends to the height of its content. Then I have a sidebar and content area, both floating left. Then I have a footer which is set to clear: both. Yet when the page renders, the footer is actually pushed away from content, so it looks like it's floating in space, as shown by attached image. When I remove margin from p elements, it's no longer pushed away. But the p is nested in the floating div so I don't understand how it can be pushing the footer div away? Thanks for any suggestions.
    Code:
    			#wrapper {
    				position: relative;
    				left: 50%;
    				width: 960px;
    				margin-left: -480px;
    			}
    
    			#maincontent {
    				background: url(templatetile2.png) top left repeat-y;
    				overflow: auto;
    			}
    
    			#sidebar {
    				float: left;
    				width: 220px;
    				overflow: hidden;
    			}
    
    			#content {
    				float: left;
    				width: 620px;
    				background-color: #e6e7e7;
    			}
    
    			#footer {
    				clear: both;
    				background-color: red;
    			}
    
    
            <div id="wrapper">
    		<div id="maincontent">
    			<div id="sidebar">
    				<div>
    					<a href="#">Unsubscribe</a>
    				</div>	
    			</div>	
    			<div id="content">	
    				<h1>Headline</h1>
    				<p>
    					This element is pushing the content div away from the footer div due to the margin. Yet this p element is a child of the content div so I don't understand how it can be affecting the other div. 
    				</p>	
    
    		        </div>
    		        <div id="footer">
    			   <div>
    				<p><a href="#">Click here</a></p>
    			   </div>	
    		       </div>	
              </div
    Attached Thumbnails Attached Thumbnails p element pushing footer set to clear:both away from floating divs?-p-pushing-footer-away.jpg  

  • #2
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    sounds like margin collapse ~ the gap is caused by the margin of the "<p>" tag as you've identified already

    you can prevent this by adding "padding-bottom:1px;" to #content and padding-top:1px to #footer

    im pretty sure there's another way to "fix" it but my memorys just blank.

    i suspect if you view it in IE it'll display as expected albeit incorrectly.

  • Users who have thanked met for this post:

    johnmerlino (05-14-2010)

  • #3
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts
    Thanks that worked. But I don't understand why it worked for a number of reasons. 1) the p element is nested in the content div, so if the p element has bottom margin, shouldn't the container wrap around it (and hence its background contents)? 2) If p element has a default margin greater than 1px, how can a padding-bottom and padding-top of 1px, respectively solve this issue? Like I said, it works. But I don't understand logically how it does. Thanks for any response.

  • #4
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    truthfully i don't understand it properly either

    this is as in-depth discussion as you'll find :

    http://www.howtocreate.co.uk/tutoria...rgincollapsing


  •  

    Tags for this Thread

    Posting Permissions

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