Container not going to bottom of page

Question

tonycfzzz 0 Newbie Poster

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

html-css user-interface web-design

2 Contributors
4 Replies
185 Views
2 Days Discussion Span
Latest Post 14 Years Ago Latest Post by tonycfzzz

Dani AI

Generated 6 Months Ago

This is a classic float-containment issue: your two columns are floated, and floated boxes are taken out of the normal flow so the parent (.container) collapses to not include them. was right to suggest removing a fixed height (percent heights behave oddly unless the parent has an explicit height), and ’s fix—removing float from the footer and giving it clear: both—is a perfectly valid quick solution because the footer then forces the flow to clear and the container expands.

If you want alternatives that are a bit more robust:

Add a clearfix to the container (keeps markup simple):
```
.clearfix::after {
content: "";
display: table;
clear: both;
}
```
Then use <div class="container clearfix">.
Make the container establish a new block formatting context:
```
.container { overflow: auto; /* or overflow: hidden; */ }
```
(Use hidden carefully — it can clip content or hide intended overflow.)
Modern approach: ditch floats and use Flexbox or Grid for the columns (more control, responsive by default).

A few quick housekeeping pointers that will help later: remove height: 100% on .container unless you really need it; use valid CSS shorthands (border: 1px solid #000000; and background-color: #FFFFFF;), and avoid nonstandard values like vertical-align: text-middle on block elements. Validate after changes and test across browsers.

Short-term: your footer clear is fine. Long-term: use the clearfix or move to Flexbox/Grid for cleaner, more predictable layouts.

All 4 Replies

hericles 289 Master Poster

14 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

tonycfzzz 0 Newbie Poster

14 Years Ago

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:

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

Container not going to bottom of page

Dani AI

Recommended Answers Collapse Answers

All 4 Replies

Recommended Answers