SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    OverFlow Problem

    Was wondering if anyone was able to help me here.

    I have a problem with my content overflowing past the end of the content div and past the footer. The footer is meant to sit at the bottom of the page, however it just doesnt seem to work...

    CSS CODE:
    Code:
    BODY, html{
    	background-color:#12499f;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	
    }
    table{
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	line-height: 24px;
    }
    #content {
    	float: right;
    	width: 719px;
    		
    }
    #footer{
    	
    	width: 1000px;
    	height:154px;
    	background-image:url("images/layout/footer.gif");
    	background-repeat:no-repeat;
    	margin-left:auto;
    	margin-right:auto;
    	clear:both;
    }
    #navigation {
    	width: 231px;
    	height:576px;
    	background-image:url("images/layout/menu.gif");
    	border-right: solid 1px #ec1c24;
    	
    }
    #header{
    	width:959px;
    	background-image:url("images/layout/buzzWord.gif");
    	background-repeat:no-repeat;
    	height:166px;
    	margin-bottom:15px;
    }
    
    #container{
    	width:960px;
    	margin-left:auto;
    	margin-right:auto;
    	display:block;
    }
    
    #main{
    	background-color:#FFFFFF;
    	padding-top:30px;
    	clear:both;
    	display:block;
    	overflow: hidden;
    }
    .pageTitle {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 20px;
    	font-weight: bold;
    	color: #12499f;
    }
    HTML :
    HTML Code:
    <link href="buzzStyles.css" rel="stylesheet" type="text/css" />
    <div id="container"> 
    <div id="header"></div>
    
    <div id="main">
      <div id="content">{include file='content.tpl'}<br />
    
    </div>
    		<div id="navigation"></div>
    	
    </div>
    
    
    </div>
    <div id="footer"> </div>
    Any help would be great, i have spent ages on this

  2. #2
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also, i just need to add that I am not sure if overflow is even the issue...however it seems to work in firefox, just not IE..

  3. #3
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    floats are nor cleared
    haslayout problems in IE
    height set on nav

    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" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	* {margin:0;padding:0;}
    	
    	body{
    	background-color:#12499f;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	}
    	
    	head+/**/body .fc:after{
    	content:".";
    	display:block;
    	height:0px;
    	clear:both;
    	visibility:hidden;
    	}
    	
    	/* mac hide \*/
    	* html .fc{height:1%;}
    	*+html .fc{display:inline-block;}
    	/* End hide */
    	
    	table{
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	line-height: 24px;
    	}
    	#content {float:right;width:719px;border-left:solid 1px #ec1c24;margin-left:-1px;}
    	
    	#footer{
    	width:1000px;
    	height:154px;
    	background:#ccccff url("images/layout/footer.gif") no-repeat;
    	margin:0 auto;
    	}
    	
    	#navigation{
    	float:right;
    	width:240px;
    	background:url("images/layout/menu.gif");
    	border-right:solid 1px #ec1c24;
    	}
    	
    	#header{
    	width:959px;
    	background:#ffccff url("images/layout/buzzWord.gif") no-repeat;
    	height:166px;
    	margin-bottom:15px;
    	}
    
    	#container{width:960px;margin: 0 auto;}
    
    	#main{
    	background:#FFFFFF;
    	padding-top:30px;
    	}
    	
    	.pageTitle {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 20px;
    	font-weight: bold;
    	color: #12499f;
    	}
    	#main p,#footer p,#header p{padding:5px;}
    	</style>
    	<script type="text/javascript">
    
    	</script>
    </head>
    <body>
    <div id="container">
    
    <div id="header"><p>header</p></div>
    
    
    <div id="main" class="fc">
    
    <div id="content">
    <p>{include file='content.tpl'}
    
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <!-- <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
     -->
    end
    </p></div>
    
    <div id="navigation"><p>nav</p></div>
    	
    </div>
    
    
    </div>
    
    <div id="footer"><p>footer</p></div>
    
    </body>
    </html>

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Thanks mate, works like a charm now


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
  •