SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Cant add margin to div

    I cant add a margin-top to my footer div to give space between the siteWrapper div and itself. Is this something to do with margin collapse? This keeps happening to often so I want to find out whats going wrong so I dont keep running into to the same problem in the future.


    HTML

    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"
    	lang="en"
    	xml:lang="en"
    >
    <head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=utf-8"
    />
    
    <meta
    	http-equiv="Content-Language"
    	content="en"
    />
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="css/reset.css"
    	media="screen,projection,tv"
    />
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="css/style.css"
    	media="screen,projection,tv"
    />
    
    <title></title>
    
    </head>
    
    
    
    <body>
    
    <div class="siteWrapper">
    	
    	<div id="header">
    
    		<img src="images/logo.gif" alt="Logo"/>
    
    		<ul id="nav">
    			<li class="navItem"><a href="#">Home</a></li>
    			<li class="navItem"><a href="#">Quote Me</a></li>
    			<li class="navItem"><a href="#">Excursions</a></li>
    			<li class="navItem"><a href="#">Holidays</a></li>
    			<li class="navItem"><a href="#">Fleets</a></li>
    			<li class="navItem"><a href="#">Depots</a></li>
    		</ul>
    
    	</div>
    
    	<div id="mainContent">
    	
    		<div id="contentLeft">
    
    
    
    			<h1>Latest</h1>
    
    			<div class="post">
    
    				<ul>
    					<li class="thumb"><img src="images/thumb2.png" alt="Post 1"/></li>
    					<li class="title"><h2>BLACKPOOL & ILLUMINATIONS - 15.75</h2></li>
    					<li class="info"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta dignissim nisl, vel tempor turpis placerat non. Nulla facilisi. Cras in leo quis lacus aliquet eleifend non tincidunt nisi. Cras sed rhoncus justo. Nulla facilisi. Nulla quam erat, molestie sed blandit sed.</p></li>
    				</ul>
    				
    
    			</div>
    
    
    
    			<div class="post">
    
    				<ul>
    					<li class="thumb"><img src="images/thumb2.png" alt="Post 1"/></li>
    					<li class="title"><h2>BLACKPOOL & ILLUMINATIONS - 15.75</h2></li>
    					<li class="info"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta dignissim nisl, vel tempor turpis placerat non. Nulla facilisi. Cras in leo quis lacus aliquet eleifend non tincidunt nisi. Cras sed rhoncus justo. Nulla facilisi. Nulla quam erat, molestie sed blandit sed.</p></li>
    				</ul>
    				
    
    			</div>
    
    
    
    
    
    		</div>
    
    		<div id="contentRight">
    
    
    			<div id="tweetsContainer"></div>
    
    
    
    		</div>
    
    
    	</div>
    
    </div>
    
    <div id="footer"></div>
    
    </body>
    
    
    </html>


    CSS

    Code:
    @font-face { 
    	font-family: Trebuchet; src: url('../trebuc.ttf'); 
    	font-family: TrebuchetBold; src: url('../trebucbd.ttf');
    
    } 
    
    body{
    	background-image:url('../images/bg.png');
    	background-repeat:repeat-x;
    	font-family:Trebuchet, Arial, sans-serif;
    	color:#222222;
    }
    
    h1{
    	font-size:35px;
    	font-family: TrebuchetBold;
    	padding: 0 0 50px 0;
    	color:#94bdbd;
    	text-shadow: 0px 1px #505050;
    	
    }
    
    
    
    .siteWrapper{
    	margin:0 auto;
    	width:960px;
    	
    }
    
    
    
    
    
    
    
    #header{
    	height:260px;
    	
    }
    
    
    #header img{
    	display:block;
    	margin:0 auto;
    	text-align:center;
    	padding-top:60px;
    	
    }
    
    
    
    
    
    
    
    
    #nav{
    
    	margin:0 auto;
    	width:580px;
    	margin-top:70px;
    	
    }
    
    .navItem{
    	display:block;
    	float:left;
    	padding:0 20px 0 20px;
    	
    
    }
    
    .navItem a{
    	color:#222222;
    	text-decoration:none;
    }
    
    .navItem a:hover{
    	border-bottom:1px solid #ffc200;
    }
    
    
    
    
    
    
    
    
    
    
    #mainContent{
    	margin-top:45px;
    	
    
    }
    
    
    
    
    
    
    #contentLeft{
    	width:600px;
    	float:left;
    	
    }
    
    .post{
    	height:122px;
    	padding-top:30px;
    	
    	
    }
    
    .thumb{
    	height:106px;
    	width:106px;
    	float:left;
    	
    }
    
    .title{
    	float:right;
    	width:475px;
    	
    }
    
    .title h2{
    	font-size:17px;
    	
    	
    }
    
    .info{
    	float:right;
    	width:475px;
    	padding:12px 0 0 0px;
    	
    }
    
    .info p{
    	font-size:13px;
    	line-height:16px;
    	color:#6e6e6e;
    	text-align:justify;
    	
    	
    }
    
    
    
    
    
    
    
    
    
    #contentRight{
    	width:330px;
    	float:right;
    	
    	
    }
    
    
    #tweetsContainer{
    	width:252px;
    	height:432px;
    	background-image:url('../images/tweetsBg.png');
    	float:right;
    	
    }
    
    
    
    
    
    
    
    
    
    
    #footer{
    	background-image:url('../images/footerBg.png');
    	height:220px;
    	clear:both;
    	margin-top:50px;
    	
    }


    Also is you see any other problems please correct me on it, thanks.

  2. #2
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try adding overflow:hidden to siteWrapper. I am wondering if it has something to do with the floats in relation to the outside wrapper.

  3. #3
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you, that seems to have worked.

  4. #4
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great, glad it worked. Here is a bit of reading to know why that happened and what to look for in the future. I always like to know why, because it helps me think critically in the future:

    http://www.visibilityinherit.com/cod...ain-floats.php

  5. #5
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll take a look, thanks.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    The reason the margin on the footer doesn't take effect is because you haven't contained the floats within the parent as sdt76 rightly suggests. This means that above the footer is only floated content. Floats are removed from the flow so the margin top on your footer now just slides under the float and has no effect. If you had placed a really large top margin on the footer then eventually it would hit the containing block and start pushing the footer down once again. Of course that's not a solution because the floats could be varying sizes.

    The solution is to contain the floats within sitewrapper and then the top margin on the footer hits the bottom of sitewrapper because it has now encompassed its floated children.

    If there was no parent around the floats and you wanted following content to be pushed away then you should use a bottom margin on the float instead as floats always obey their margins and do not collapse.

    Borders, backgrounds and margins on static content will slide under a float as if the float wasn't there. A float makes room for itself by repelling the foreground content (such as text and images) out of the way but does not repel the background. The original static element in effect is still in the same place it always was as if the float wasn't there but with its foreground content pushed out of the way to make way for the float.


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
  •