Solved

css div at bottom of page

Posted on 2008-10-26
2
405 Views
Last Modified: 2008-10-26
I have a div which needs to be placed beneath another div.
but for some reason they move side by side.

<div id="wrapper">content</div>
<div id="footer">content</div>


#wrapper
{
	padding: 0px;
	margin-top: 11px;
	margin-bottom: 0px;
	margin-right: auto;
	margin-left: auto;
	text-align:left;
	width: 715px;
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 715px;
}
#footer
{
	overflow:hidden;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #666666;
	text-decoration: none;
	text-align: center;
	padding:0px;
	width:720px;
	voice-family: "\"}\"";
	voice-family:inherit;
	width:720px;
	float: none;
	margin: 0px;
	height: 34px;
	border: 1px solid #FF0000;
}

Open in new window

0
Comment
Question by:Cheryl Lander
2 Comments
 
LVL 82

Accepted Solution

by:
hielo earned 400 total points
ID: 22809417
add:

clear:both;

to your #footer{...} definition
0
 
LVL 44

Assisted Solution

by:scrathcyboy
scrathcyboy earned 100 total points
ID: 22809438
<div id="wrapper">content</div>
<BR />
<div id="footer" style="clear:both;">content</div>

The <BR> is guaranteed to put the footer on a line below the wrapper, and the clear:both style FIXES the footer in the page relative to the other DIV and other elements.
0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

685 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question