SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need quick help with footer not being pushed down with margin-top property

    Here is my HTML:

    Code:
    <html>
    	<head>
    		<link rel="stylesheet" type="text/css" href="style.css" />
    	</head
    <body>
    	<div id="container">
    		<div id="header">
    			<p>header</p>
    		</div>
    		<div id="div1">
    			<p>fake div 1 text blah blah blah asdfasdfa sfdasdfasdf</p>
    		</div>
    		<div id="div2">
    			<p>fake div 2 text blah blah blah asdfasdfa sfasdfasdfa</p>
    		</div>
    		<div id="footer">
    			<p>footer</p>
    		</div>
    	</div>
    </body>
    </html>
    And here is my CSS:

    Code:
    #container{
    border: #999 1px solid;
    position: relative;
    width: 500px;
    }
    
    #header{
    border: #999 1px solid;
    margin-bottom: 30px;
    }
    
    #div1{
    border: #999 1px solid;
    float: left;
    width: 228px;
    margin: 0 10px;
    }
    
    #div2{
    border: #999 1px solid;
    float: left;
    width: 228px;
    margin: 0 10px;
    }
    
    #footer{
    border: #999 1px solid;
    margin-top: 30px;
    clear: both;
    }
    
    p {
    margin: 0;
    }
    I simply want the #footer to be pushed down 30px from the closest div. Why doesn't giving it margin-top: 30px; push the entire div down 30 pixels from #div1????

    Thanks so much in advance.

    Luke

  2. #2
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    As #div1 and div#2 are floated, the margin-top of #footer ignores them. Instead, apply the margin to the bottom of the floated divs.

    The CSS is the same for both, so only one rule is needed.

    Code:
    #div1, #div2 {
    border: #999 1px solid;
    float: left;
    width: 228px;
    margin: 0 10px 30px;
    }
    
    #footer {
    border: #999 1px solid;
    clear: both;
    }

  3. #3
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I figured I could do it that way. Thanks for the help.


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
  •