• Locked
2 replies [Last post]
Wed, 2012-09-19 22:45
Mutak
Mutak's picture
Offline
newbie
Last seen: 9 years 44 weeks ago
Timezone: GMT+2
Joined: 2012-09-19
Posts: 5
Points: 7

Hello.

i'm trying to make fluid layout for my website and I have problem with footer position.
Layout should look like:
banner
menu
content div <-- margin --> leftBox div
footer

Content and leftBox are in the same line, there is a some space between them. And the footer is in that free space instead of being under those two divs.
CSS code:

@CHARSET "UTF-8";
 
body{
	font: normal 100% Helvetica, Arial, sans-serif;
	background-color:#eee;
	color: #000;
	font-size: 12px;	
}
.page{
	margin: 20px auto;
	padding 0 1em;
	max-width: 82.5em;
}
 
h1{
	font-family: Georgia,serif;
	font-size: 1.75em;
}
 
.banner{
	width:100%;
	margin-bottom: 1.5em;
}
 
.menu{
	width:100%;
	margin-bottom:1.5em;
	font-size:1.25em;
	background-color:#ddd;
}
 
.content{
	float:left;
	width:85.5%;
	background-color:#ccc;
	margin-bottom:1.5em;
 
}
 
.leftBox{
	float:right;
	width:12.5%;
	background-color: #bbb;
	margin-bottom:1.5em;
 
}
 
.footer{
	margin:0 auto;
	width:100%;
	background-color:#999;
}
img{
	width:100%;
}

Page code (in JSP)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<jsp:include page="template/Header.jsp">
<jsp:param value="Strona Główna" name="pageName"/>
</jsp:include>
<body>
<div class="page"> 				<!-- start page -->
 
		<div class="banner"> 	<!-- start banner -->
			<img src="img/banner.png" alt="marek krokosiński portfolio . . ." />
		</div>					<!-- end banner -->
 
		<div class="menu">		<!-- start menu -->
			<span>OMG !</span>
			<span> OMG !</span>
		</div>					<!-- end menu -->
 
		<div class="content">	<!-- start content -->
		<p> Test</p>
 
		<p> Test</p>
 
		<p> Test</p>
		</div>					<!-- end content -->
 
		<div class ="leftBox">	<!-- start leftBox -->
		<p> Test</p>
		</div>					<!-- end leftBox -->
		<div class="footer">	<!-- start footer -->
		<span>All right reserved</span>
		</div>					<!-- end footer -->
 
 
</div>							<!-- end page -->
</body>
</html>

it looks like this:
http://postimage.org/image/4jx3ftujt/

footer is of course thing with "all rights reserved" text;>

I also tried to remove the content and leftBox divs - so the footer should be under the menu div, and it worked very well.

Any ideas what can be wrong?

Top
Tags:
Wed, 2012-09-19 23:10
#1
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 2 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi Mutak, Try using

Hi Mutak,
Try using clear:both; on the footer.

Top
Thu, 2012-09-20 19:26
#2
Mutak
Mutak's picture
Offline
newbie
Last seen: 9 years 44 weeks ago
Timezone: GMT+2
Joined: 2012-09-19
Posts: 5
Points: 7

Thank you ! I forgot to clear

Thank you ! I forgot to clear the float Smile Heh it was so simple Smile

Top
  • Locked