SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Apr 2003
    Location
    canada
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Footer Layout out of whack

    Hi,

    site is located at http://www.defineme.ca

    You will see that the footer layout is all out of whack. If you look at it in firebug it's saying the first and second boxes are nested which they are not they are separated but the corresponding DIV tags. Is there something I'm missing here??

    Code:
    <div id="footer">
    	<div class="top">
        	<div class="listBox">
                	<h3>Social Media</h3>
                	<ul>
                        <li><a href="http://www.facebook.com/DefineMePT">Facebook</a></li>
                        <li><a href="http://twitter.com/#!/DefineMePTt">Twitter</a></li>
                        <li><a href="http://www.linkedin.com/pub/michelle-pitman/20/1b1/ab8>Linked In</a></li>
                    </ul>
            </div>
            <div class="listBox">
           	  	<h3>Sitemap</h3>
                	<ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="/about">About</a></li>
                        <li><a href="/services">Classes</a></li>
                        <li><a href="/contact">Contact Us</a></li>
                    </ul>
            </div>
            <div class="listBox">
           	  <h3>Blog Posts</h3>
            </div>
            <div class="listBox">
            	<h3>Contact Us</h3>
                	<p>Define Me Persoanl Training<br />
                    P:905-441-1524<br />
                    E:info@defineme.ca</p>
            </div>
        </div>
    </div>
    </body>
    </html>
    And the corresponding CSS
    Code:
    #footer {
        margin:0px auto;
        background: none repeat #ccc;
        clear:both;
        color: #fff;
        display: block;
        font-family: droid-serif,Georgia,Times,serif;
        font-size: 12px;
        height: 210px;
        line-height: 15px;
        width: 100%;
    }
    
    #footer .top {
        margin: 0 auto;
        overflow: hidden;
        padding: 24px 0 14px;
        width: 960px;
    }
    
    #footer .listBox {
        background: url("images/bg_footer_listdivider.jpg") no-repeat scroll right top transparent;
        float: left;
        min-height: 170px;
        overflow: hidden;
        padding: 0 0 0 20px;
        width: 220px;
    }
    
    #footer .listBox p {
    	font-size:1.2em;
    	line-height:1.8em;
    	color#fff;
    }
    
    #footer .listBox h3 {
        font-size: 1.6em;
    	color:#fff;
        font-weight: bold;
        margin: 0 0 0.8em;
    }
    
    #footer .listBox ul li {
        font-size: 1.3em;
        list-style: none outside none;
        margin: 0 0 0.8em;
    }
    
    
    #footer .listBox ul li a {
        color: #fff;
        line-height: 1.4em;
        text-decoration: none;
    }
    Your Websites Your Way!!
    www.clhdesigns.com

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Did you fix this? All the listboxes seem to be a separate entity in the footer, and nothing is really displaying "out of whack" (which is a horrible way to describe the problem, sorry to say ).
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Member
    Join Date
    May 2012
    Location
    Norway :)
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I checked out your website and you seem to fixed the issue. Anyway I had this bottom alignment css code prepared. My example creates a footer in bottom of the container.


    <html>
    <head>
    <title>CSS Text Alignment </title>
    </head>
    <body>
    <style type="text/css">
    #container
    {
    position: relative;
    height: 150px;
    border: 1px solid;
    }
    #bottom-content
    {
    position: absolute;
    bottom: 0;
    left: 0;
    }
    </style>
    <div id="container">
    <h1>
    Header text</h1>
    <div id="bottom-content">
    bottom content</div>
    </div>
    </body>
    </html>


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
  •