1.11M Members

Container not going to bottom of page

 
0
 

I am having a hard time getting the sections of my page to all stay together.

I keep banging my head against the wall on this - so any help is appreciated.

My header Div works good,
but the 2 columns I want to be below the div run off of the container div and so the container div doesn't connect with the footer.

<html>
<head>
<title></TITLE>

<link rel="stylesheet" type="text/css" href="layout.css">

</head>
<body>

<div class="container">
<div class="title">
</div>
		
    			<div class="link_row">
        <div class="link_cell">
            <a class="main" href="#">Home</a>
		    </div>
        <div class="link_cell">
            <a class ="main" href="#">Portfolio</a>
        </div>
        <div class="link_cell">
            <a class ="main" href="#">About</a>
        </div>
        <div class="link_cell">
            <a class ="main" href="#">Contact</a>
        </div>
        </div>
   

		
<div class="left_col">
this is where pictures gothis is where pictures gothis is where pictures gothis is where pictures gothis is where pictures gothis is where pictures gothis is where pictures gothis is where pictures gothis is where pictures gothis is where pictures gothis is where pictures gothis is where pictures gothis is where pictures gothis is where pictures go
this is where pictures gothis is where pictures gothis i
this is where pictures gothis is where pictures gothis i<br />
this is where pictures gothis is where pictures gothis i
this is where pictures gothis is where pictures gothis i
</div>
<div class="right_col">
 is where text goes<br>
  is where text goes<br>
	 is where text goes<br>
	  is where text goes<br>
		 is where text goes<br>
		  is where text goes<br>
			 is where text goes<br>
			  is where text goes<br>
 is where text goes<br>
  is where text goes<br>
	 is where text goes<br>
	  is where text goes<br>
		 is where text goes<br>
		  is where text goes<br>
			 is where text goes<br>
			  is where text goes<br>
 is where text goes<br>
  is where text goes<br>
	 is where text goes<br>
	  is where text goes<br>
		 is where text goes<br>
		  is where text goes<br>
			 is where text goes<br>
			  is where text goes<br>
 is where text goes<br>
  is where text goes<br>
	 is where text goes<br>
	  is where text goes<br>
		 is where text goes<br>
		  is where text goes<br>
			 is where text goes<br>
			  is where text goes<br>

</div>

<div class="footer">
</div>
</div>

</body>
</html>

Here's the CSS

body {
		 font-size: 100%;
		 width: 100%;
		 background-color: #c0c0c0;
		 text-align: center;
		 margin: auto;

} 


div.container {
		text-align: center;
                width: 960px; 
		height: 100%;
		background-color: FFFFFF;
		border: 1px;
		border-style: solid;
		border-color: 000000;
		box-shadow: 0px 0px 50px 10px #606060;
		cellspacing: 0px;
		cellpadding: 0px;
		margin-top: 0px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 0px;
}




div.title {
    text-align: center;
		vertical-align: text-middle;
    width: 960px; 
		height: 100px;
		cellspacing: 0px;
		cellpadding: 0px;
		margin-top: 0px;
		margin-left: 0;
		margin-right: 0;
		margin-bottom: 0px;
		background-image:url('title.jpg');
		position: relative;
}

div.link_row {
    width: 960px;
		height: 35px;
		position: relative;
		text-align: center;
		margin-left: 0;
		margin-right: 0;
}

div.link_cell {
                opacity:1;
                filter:alpha(opacity=100); /* For IE8 and earlier */
                width: 192px;
		border: 0px;
                text-align: center;
		position: relative;
		vertical-align: text-middle;
		background-color: #ffffff;
		float: left;
                border: 0px;
		transition:opacity 2s;
                -moz-transition:opacity 2s; /* Firefox 4 */
                -webkit-transition:opacity 3s; /* Safari and Chrome */
                -o-transition:opacity 2s; /* Opera */
}

div.link_cell:hover {
    opacity:.5;
    filter:alpha(opacity=50); /* For IE8 and earlier */
    width: 192px;
    text-align: center;
    position: relative;
    vertical-align: text-middle;
    background-color: #ffffff;
    float: left;
    border: 0px;
}

div.left_col {
	        width: 450px;
		border: 1px;
		border-style: solid;
		border-color: #000000;
		position: relative;
		margin-top: 50px;
		margin-left: 70px;
		margin-right: 0px;
		margin-bottom: 10px;
                float: left;
}		

div.right_col {
                width: 300px;
		border: 3px;
		border-style: solid;
		border-color: #000000;
		background-color: #a2c0da;
		position: relative;
		margin-top: 50px;
		margin-left: 50px;
		margin-right: 70px;
		margin-bottom: 10px;
		float: left;
}
		
div.footer {
                width: 960px;
		height: 50px;
		border: 0px;
		border-style: solid;
		border-color: green;
		background-color: #000000;
		position: relative;
		margin-top: 0px;
		margin-left: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
		float: left;
}		

a.main:link { 
  	        color: #a2c0da;
		text-decoration:none;
		font-size: 2em;
		letter-spacing: 3;
		font-face: arial;
		-webkit-transition:color .5s; /* Safari and Chrome */
		-webkit-transition:text-shadow .5s; /* Safari and Chrome */
		font-family: myFirstFont;
}

a.main:visited{ 
                color: #a2c0da;
		text-decoration:none;
		font-size: 2em;
		letter-spacing: 3;
		font-face: arial;
		-webkit-transition:color .5s; /* Safari and Chrome */
		-webkit-transition:text-shadow .5s; /* Safari and Chrome */
		font-family: myFirstFont;
}

a.main:hover {
                color: 4682B4;
		text-decoration: underline;
		font-size: 2em;
		letter-spacing: 3;
		text-shadow: 3px 3px 3px #000000;
}		

a.main:active { 
                color: #a2c0da;
		text-decoration:none;
		font-size: 2em;
		letter-spacing: 3;
		font-face: arial;
		-webkit-transition:color .5s; /* Safari and Chrome */
		-webkit-transition:text-shadow .5s; /* Safari and Chrome */
		font-family: myFirstFont;
}

a.current:link { 
  	        color: #c0c0c0;
		text-decoration:none;
		font-size: 1em;
		letter-spacing: 3;
		-webkit-transition:letter-spacing .6s; /* Safari and Chrome */

}

a.current:visited{ 
                color: #a2c0da;
		text-decoration:none;
		font-size: 1em;
		letter-spacing: 3;
}

a.current:hover {
                color: #000000;
		text-decoration: none;
		font-size: 1em;
		letter-spacing: 10;
}		

a.current:active { 
                color: #a2c0da;
		text-decoration:none;
		font-size: 1em;
		letter-spacing: 3;
}	

@font-face {
    font-family: myFirstFont;
    src: url('juice.ttf')
    ,url('Sansation_Light.eot'); /* IE9+ */
}

@font-face
{
font-family: myFirstFont;
src: url('juice.ttf')
    ,url('Sansation_Bold.eot'); /* IE9+ */
font-weight:bold;
}

div
{
font-family:myFirstFont;
}
 
0
 

Is the content inside the container div taller than the screen is high?
If so then it will be too much for the container to handle and will overflow. Try setting the container div height to auto and see what happens.

 
0
 

I changed it, but right_col still goes off the page

 
0
 

When you say it goes off the page do you mean you have to scroll to see it all? That just means you have more content than will fit on one page...

Question Answered as of 2 Years Ago by hericles
You
This question has already been solved: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: