Container not going to bottom of page

Question

tonycfzzz 0 Newbie Poster

12 Years Ago

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;
}

ui-ux web-design

2 Contributors
4 Replies
148 Views
2 Days Discussion Span
Latest Post 12 Years Ago Latest Post by tonycfzzz

hericles 289 Master Poster

12 Years Ago

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.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

tonycfzzz 0 Newbie Poster · Answer 1 · 2012-03-15T11:30:14+00:00

I changed it, but right_col still goes off the page

hericles 289 Master Poster Featured Poster · Answer 2 · 2012-03-15T14:29:35+00:00

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...

tonycfzzz 0 Newbie Poster · Answer 3 · 2012-03-16T22:21:59+00:00

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