No replies
2489
2489's picture
Offline
newbie
Last seen: 13 years 27 weeks ago
Joined: 2009-07-24
Posts: 2
Points: 0

i am working on a practice web site and im having problems. i set the #document div set to min-height:400px; but then the when i input content that overpasses 400px in the #col div it goes over the #footer div. and if in #document i set height to a specified height it works but then i have to do that for every page specifically. i hope you can help and i explained it ok. here's the code

also the way i have it it works great on IE but on chrome and FF it doesnt

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="9.css" />
</head>
 
<body>
 
<div id="Document">
 
	  <div id="Header">
        	 <div id="Top_Right">
             	<ul>
                	<li><a href="#">Terms of Use</a></li>
                    <li><a href="#">Privacy Use</a></li>
                </ul>            
        </div>
                <div id="Logo"><a href="#"><img src="Images/guitar102.png" alt="guitar102" /></a></div>
      </div>
 
 
 
  <div id="Nav"><ul>
                    	<li><a href="#"><img src="Images/home.png" /></a></li>
                        <li><a href="#"><img src="Images/links.png" /></a></li>
                        <li><a href="#"><img src="Images/about.png" /></a></li>
                        <li><a href="#"><img src="Images/contact.png" /></a></li>
                    </ul> 
 
           	   <hr /> 
  </div>
 
 
 
 
  <div id="Side_Nav">
               	 <ul>
               	   <li><a href="#"><img src="Images/less.png" /></a></li>
                     <li><a href="#"><img src="Images/art.png" /></a></li>
                     <li><a href="#"><img src="Images/his.png" /></a></li>
                   <li><a href="#"><img src="Images/news_.png" /></a></li>
                    <li><a href="#"><img src="Images/ad.png" /></a></li>
               	 </ul>   
  </div>
 
 
 
 
 <div id="Col">      
 
 
                <div id="Column1">
                  <p>Content goes here. Content goes here.</p><p>Content goes here. Content goes here.</p>
            <p>Content goes here. Content goes here.</p><p>Content goes here .Content goes here.</p> <p>Content goes here.Content goes here.</p>
            <p>Content goes here .Content goes here.</p><p>Content goes here .Content goes here.</p>
</div>
 
 
 
<div id="Column2">  
            <p>Content goes here. Content goes here.</p><p>Content goes here.  Content goes here.</p>
            <p>Content goes here. Content goes here.</p><p>Content goes here  Content goes here.</p> <p>Content goes here.Content goes here.</p>
            <p>Content goes here. Content goes here.</p><p>Content goes here. Content goes here.</p>
</div>
 
          <div id="Column3">    <p>Content goes here.Content goes here.</p><p>C ontent goes here.Content goes here.</p>
            <p>Content goes here. Content goes here.</p><p>Content goes here.Cont  ent goes here.</p> <p>Content goes here.Content goes here.</p>
            <p>Content goes here. Content goes here.</p>
            <p>Content goes here.Cont  ent goes here.</p>
            <p>Content goes here.Content goes here.</p>
            <p>Content goes here. Content goes here.</p>
            <p>Content goes here.Cont  ent goes here.</p>
            <p>Content goes here.Content goes here.</p>
    <p>Content goes here. Content goes here.</p><p>Content goes here.C ontent goes here.</p></div>
</div>
          </div>
 
 
 
 
<div id="Footer">
              <div id="Top_Fot"></div>
 
            <div id="Fot"></div>
            <div id="Bot_Fot"></div>        
</div>  	
 
 
 
</body>
</html>
 
 
 
 
 
 
 
 
 
 
 
/* CSS Document */
Body{ background-color:#000000;
		font-family:Georgia, "Times New Roman", Times, serif;
		color:#FFFFFF;
		margin:0px;
		padding:0px;
}
 
h1{
		margin-left:20%;
}
 
a {
	text-decoration:none;
	color:#FFFFFF;
}
 
a:hover {
		text-decoration:none;
		color:#FFFFFF;}
 
 
#Document {
 
		background:url(Images/1.jpg) repeat-y;
		background-color:#310606;
		color:#FFFFFF;
		height:700px;
		width:1005px;
		}
 
#Header {
		height:154px;
		background-color:#310606;
		margin:0px; padding:0px;
		float:left;
		width:1005px;
		background:url(Images/header4.png) no-repeat;
		}
 
 
 
#Logo {
		margin:0px 0 0 5px;
		height:120px;
		width:200px;}
 
#Logo img{
		border-style:none;}
 
#Top_Right {
		margin:0px;
		padding:15px 10px 0 0;
		height:100px;
		width:150px;
		float:right;
		}
 
#Top_Right ul {
			list-style:none;
			}
#Top_Right ul li{
		margin:5px 0 0 0;}
 
 
 
#Col {
		margin:5px 0 0 120px;
		float:left;
		text-align:justify;
		padding:10px 10px 10px 10px;
		width:780px;}
 
 
 
#Column1{
	float:left; width:280px; margin:0 30px 0px 0;
 
	}
#Column2{
	float:left; width:210px; margin-right:30px;}
#Column3{
	float:left; width:150px;}
 
 
 
 
#Nav{
		width:640px;
		height:60px;
		float:left;
		margin:0 40px 0 125px; padding:0px 0 0 60px;
		}
#Nav ul{
		margin:0px 0 0 0px; padding:0px 0 0 5px;
		}
 
#Nav ul li{
		display:inline;
		margin:0px;
		padding-left:20px;
		list-style:none;
		}
#Nav ul li img {
 
		border-style:none;}
 
#Nav ul li a{
		color:#310606;
		text-decoration:none;}
 
#Nav ul li a:hover{
		color:#310606;
		text-decoration:none;}
 
 
 
 
 
#Side_Nav {
	height:400px;
	position:absolute;
	top:156px;
	left:0px;
	width:120px;
	padding:0px 0 0 0px;
	margin:2px  0 0 0px;
}
 
#Side_Nav ul {
		margin:0px;
		padding:0px;}
 
 
#Side_Nav ul li{
	display:inline;}
 
#Side_Nav ul li img{
		border:none;
		margin:0px;
		padding:0px;}
 
 
#Footer {
		background-color:#000000;
		margin:0px;
		padding:0px;
		width:1005px;}
 
#Fot {
		width:98%;
		height:50px;
		padding:10px 10px 10px 10px;
		background-color:#310606;}		
 
#Top_Fot {
		height:11px;
		background:url(Images/footer_start.jpg) repeat-x;}
 
#Bot_Fot {
		height:24px;
 
		background:url(Images/bottom.jpg) bottom no-repeat;}