1,105,581 Community Members

Container not going to bottom of page

Member Avatar
tonycfzzz
Newbie Poster
3 posts since Mar 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
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;
}
Member Avatar
hericles
Veteran Poster
1,078 posts since Nov 2007
Reputation Points: 98 [?]
Q&As Helped to Solve: 232 [?]
Skill Endorsements: 14 [?]
Featured
 
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.

Member Avatar
tonycfzzz
Newbie Poster
3 posts since Mar 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

I changed it, but right_col still goes off the page

Member Avatar
hericles
Veteran Poster
1,078 posts since Nov 2007
Reputation Points: 98 [?]
Q&As Helped to Solve: 232 [?]
Skill Endorsements: 14 [?]
Featured
 
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...

Member Avatar
tonycfzzz
Newbie Poster
3 posts since Mar 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

I found the answer on this website:

http://www.subcide.com/articles/creating-a-css-layout-from-scratch/P8/


I changed my div.footer{} in these ways:

removed float: left;
added clear: both;

and it fixed the problem :)

Now .container is connected all the way down the .footer

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: