Jump to content

Positioning problem


Recommended Posts

Hello,I've ran into a problem while positioning a footer on a webpage. The footer div is located below the content div; when I add a lot of content to the content div the layout looks fine, but with few content the footer will remain too far down, when it should be right below the content. I've tried everything within my reach but I can't make the footer stick to the bottom of the content without messing up the content's position. It seems that the problem is actually the container div that doesn't fit the screen, even though it has little content both on the left and right div; how can I reduce it's height? (changing the height property won't do it).The webpage can be seen at www.canudo.net/derelict/test (IE @ 1024x768, for now); here's the stylesheet:

div.container{		width: 100%;	height: 100%;	line-height: 150%;	border: solid 1px;}div.footer{	position: relative;	width: 100%;	color: white;		clear: left;	text-align: left;	background-color: aliceblue;	margin-left: 1%;	padding: 0.5em;}div.left{	float: left;	width: 18%;	margin: 0;	padding: 0.5em;	background-color: black;}div.right{	margin-left: 17%;	padding: 0.5em;}div.content{	position: relative;	text-align: left;	padding: 0.5em;	background-color: #C0C0C0;	width: 100%;	top: 60px;	margin-bottom: 7%;}h2.header{	padding: 0;	margin: 0;	text-align: right;	font-style: bold;	color: #C0C0C0;}body {		font: 80% verdana, arial, sans-serif;	color: white;	background-color: black;}/************** MENU ********************/dl, dt, dd, ul, li {	margin: 0;	padding: 0;	list-style-type: none;}#menu {	position: absolute;	top: 11%;	left: 19%;	z-index: 100;	width: 100%;	color: white;}/*** Itens*/#menu dl {	text-align: center;	float: left;	width: 9em;	font: 100% verdana, arial, sans-serif;	color: white;}#menu dt {	cursor: pointer;	text-align: center;	font-weight: bold;	background: #C0C0C0;	border-bottom: thin solid white;}/*** Sub-Itens*/#menu dd {	display: none;}#menu li {	text-align: center;	height: 100%;		opacity:.80;	-moz-opacity: 0.8; /* for Mozilla browsers */	filter: alpha(opacity=80);	background: #C0C0C0;}#menu li a, #menu dt a {	color: white;	text-decoration: none;	display: block;	height: 100%;	border: 0 none;}#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {	background: #eee;}

Thanks in advance :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...