SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2006
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Spacing Between footer & colums

    Hi People,

    No matter what I do, I cannot get rid of a huge white space between my colums and footer, I have tried extending the colums and even inserting images, I have also validatied my CSS, any ideas?

    www.fishers-homes.com

    Thanks

  2. #2
    SitePoint Enthusiast
    Join Date
    Dec 2006
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Opps, sorry, forgot to post a css files

    Code:
    html, body {height:100%}
    
    body {
    	padding:0;
    	margin:0;
    	text-align:center;
    	min-width:760px;/* FF*/
    	background-color: #FFFFFF;
    	color: #000000;
    }
    #Outer{
    	height:100%;
    	min-height:100%;
    	width:758px;
    	border-left:1px solid #000;
    	border-right:1px solid #000;
    	color: #000000;
    	text-align:left;
    	margin:auto;
    	position:relative;
    	background-color:#FFFFFF;
    	position:relative;
    }
     
    html>body #outer{height:auto;} /*For the FF*/
    #Innerwrap {/* CFt */
    	float:left;
    	width:626px;
    }
    #header{
    	position:absolute;
    	top:0;
    	left:-1px;
    	width:758px;
    	height:100px;
    	background:#FF0000;
    	border:1px solid #000;
    	overflow:hidden;
    	color: #000000;
    	z-index:100;
    	background-color: #FFFFFF;
    }
    #left {
    	position:relative;
    	width:120px;
    	float:left;
    	padding-top:100px;
    	padding-bottom:0px;
    }
    #left p {padding-left:3px;padding-right:2px}
    #right p {padding-left:4px;padding-right:2px}
    
    #right {
    	position:relative;/*for IE float */
    	width:120px;
    	float:right;
    	padding-top:100px;
    	padding-bottom:0px;
    }
    
    #footer {
    	width:758px;
    	clear:both;
    	height:50px;
    	border-top:1px solid #000;
    	border-bottom:1px solid #000;
    	background-color:#2D8800;
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:14px;
    	color: #FFFFFF;
    	text-align:center;
    	left:-3px;
    	bottom:-54px;
    	position: absolute;
    
    }
    * html #footer {/*for IE*/
    	he\ight:50px;/*IE */
    	\height:52px;
    
    }
    div,p  {margin-top:0}
    #centrecontent {
    	width:498px;
    	float:right;
    	padding-top:100px;
    	padding-bottom:32px;
    }
    #centrecontent p {padding-left:3px}
    
    #clearfooter {width:100%;height:52px;clear:both}

  3. #3
    SitePoint Zealot marbly's Avatar
    Join Date
    Nov 2005
    Location
    Croatia
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i think it might be the #footer problem

    change bottom:-54px; to bottom:0px; and go from there

    you can use negative margins to pull the footer up, look in this forums stickies (faq and tips and tricks) youll find examples there

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,802
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Here is the code in working order

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Fishing Home</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link href="layout.css" rel="stylesheet" type="text/css" />
    <link href="menu.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    html, body {height:100&#37;}
    
    body {
        padding:0;
        margin:0;
        text-align:center;
        min-width:760px;/* FF*/
        color: #000000;
        background-color: #00005B;
    }
    #outer{
        min-height:100%;
        width:758px;
        border-left:1px solid #000;
        border-right:1px solid #000;
        color: #000000;
        text-align:left;
        margin:auto;
        position:relative;
        background-color:#FFFFFF;
        position:relative;
    }
     
    * html #outer{    height:100%;} /*for IE*/
    #innerwrap {/* CFt */
        float:left;
        width:626px;
    }
    #header{
        position:absolute;
        top:0;
        left:-1px;
        width:758px;
        height:100px;
        background:#FF0000;
        border:1px solid #000;
        overflow:hidden;
        color: #000000;
        z-index:100;
        background-color: #FFFFFF;
    }
    #left {
        position:relative;/*left col float */
        width:120px;
        float:left;
        padding-top:100px;/*padding for header*/
        padding-bottom:0px;/*padding bottom */
    }
    #left p {padding-left:3px;padding-right:2px}
    #right p {padding-left:4px;padding-right:2px}
    
    #right {
        position:relative;/*for IE float */
        width:120px;
        float:right;
        padding-top:100px;/*padding for header*/
        padding-bottom:0px;/* padding for footer*/
    }
    
    #footer {
        width:758px;
        clear:both;
        height:50px;
        border-top:1px solid #000;
        border-bottom:1px solid #000;
        background-color:#2D8800;
        font-family:Arial, Helvetica, sans-serif;
        font-size:14px;
        color: #FFFFFF;
        text-align:center;
        margin:-52px auto 0;
    position:relative;
    }
    * html #footer {/*for IE*/
        height:52px;
        he\ight:50px;
    
    }
    div,p  {margin-top:0}
    #centrecontent {
        width:498px;
        float:right;
        padding-top:100px;
    }
    #centrecontent p {padding-left:3px}
    
    #clearfooter {width:100%;height:52px;clear:both} /* to clear footer */
    
    /* CSS Document */
    
    #navigation {
    width:120px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:15px;
    }
    
    #navigation ul  {
    list-style:none;
    margin:0px;
    padding:0px;
    }
    
    #navigation li  {
    border-bottom: 1px solid #FFFFFF;
    }
    
    #navigation li a:link, #navigation li a:visited  {
    display:block;
    width:100px;
    padding: 5px 5px 2px 0.5em;
    border-left:10px solid #336600;
    border-right:1px solid #336600;
    background-color:#2D8800;
    color:#FFFFFF;
    text-decoration:none
    }
    
    #navigation li a:hover  {
    background-color:#336600;
    color:#FFFFFF
    }
    
    /* Sub Title formatting */
    #title {
    display:block;
    list-style:none;
    background-color:#2D8800;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#FFFFFF;
    border-left:4px solid #336600;
    border-right:4px solid #336600;
    font-style:normal;
    }
    
    #title p {
    text-decoration:underline;}
    
    #leftcolum li {
    border-left:10px solid #336600;
    border-right:1px solid #336600;
    background-color:#2D8800; 
    }
    
    
    </style>
    </head>
    <body>
    <div id="outer">
        <div id="innerwrap">
            <div id="centrecontent">
                <!--centre content goes here -->
                <p></p>
                <p>See the explaination on the main 3 col demo for more information on these designs. </p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
            </div>
            <div id="left">
                <div id="navigation">
                    <ul>
                        <li><a href="fishing.html">Fishing</a></li>
                        <li><a href="/forum/">The Forum</a></li>
                        <li><a href="watercraft.html">Watercraft</a></li>
                        <li><a href="fishing-tackle.html">Tackle</a></li>
                        <li><a href="rigs.html">Rigs</a></li>
                        <li><a href="accessories.html">Accessories</a></li>
                        <li><a href="fishing-baits.html">Baits</a></li>
                        <li><a href="fish-species.html">Species</a></li>
                        <li><a href="images.html">Images</a></li>
                        <li><a href="fishing-videos.html">Videos</a></li>
                        <li><a href="fishing-games.html">Fishing Games </a></li>
                        <li><a href="articles.html">Articles</a></li>
                        <li><a href="directory.html">Directory</a></li>
                        <li><img src="http://www.fishers-homes.com/leftcol.jpg" width="124" height="291" /></li>
                    </ul>
                    <div id="leftcolum">
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- end innerwrap -->
        <div id="right">
            <div id="title">
                <div align="center"><strong>Popular Topics: </strong></div>
                <p>&nbsp;</p>
                <p>Fly Fishing</p>
                <p>Rods</p>
                <p>Ground Bait</p>
                <p>Sea Fish Images</p>
                <p>Fishing Videos</p>
                <p>Rivers</p>
                <p>Forums</p>
                <p><img src="http://www.fishers-homes.com/rightcol.jpg" width="87" height="329" /></p>
                <p></p>
            </div>
        </div>
        <div id="clearfooter"> </div>
        <!-- ie needs this -->
        <div id="header">
            <p><img src="http://www.fishers-homes.com/images/header.jpg" alt="header image of fish"/></p>
        </div>
    </div>
    <!-- end outer div -->
    <div id="footer"><a href="index.html">Home</a> | <a href="about-us.html">About Us</a> | <a href="contact-us.html">Contact Us</a> | <a href="copyright.html">Copyright</a></div>
    </body>
    </html>
    If you want the left and right columns to extend to the bottom then use a background image repeated n the main container as in this example.

    http://www.pmob.co.uk/temp/3col-centred-template7.htm


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
  •