Floating Problem!

jayyasay · 9th April 10, 11:54 AM

I have this whole <div> content and a 2 nested <div> elements. The first one is floated to the left (which has a longer height) and the next one is on the right (which has a shorter height).

It outputs right and perfect. BUT! After I added the footer (next to the whole <div> content), it only appears after the right floated element (which is shorter). I want to place the footer after the whole <div> element.

I'm trying to solve this problem but it took 2 days but non of my ideas worked! Aaaaah! I need your help. Here's my code:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/footer.css" />
<title> Bangkal High School </title>
</head>
<body>
<div id="whole_body">
<div id="top_links">
	<div class="links">
	<ul>
	<li><a href="index.php" name="home"> Home </a></li>
	<li><a href="grades.php" name="grades"> Grades </a></li>
	<li><a href="techer.php" name="teacher"> Teacher's Portal </a></li>
	</ul>
	</div>
</div>

<!-- Header code STARTS here -->
<div id="header">
	<div class="logo">
	<img src="css/image/logo.png" />
	</div>
	<div class="banner">
	Bangkal High School
	</div>
</div>
<!-- Header code ENDS here -->

<!-- PHP codes goes here -->

<div id="container_float">
	<span class="content1">
	<div class="content1_1">
	<h1> Bangkal High School </h1>
	<img src="css/image/pic1.jpg" alt="Bangkal Highschool" /><br />
	<p>Bangkal High School</p>
	</div>
	</span>
	<span class="content2">
	<div class="content2_2">
	<h1> Right Float </h1>
	<div class="buttons"><a href="#"><img src="css/image/mision.png" alt="png" /></a></div>
	<div class="buttons"><a href="#"><img src="css/image/other.png" alt="png" /></a></div>
	<div class="buttons"><a href="#"><img src="css/image/other.png" alt="png" /></a></div>
	<div class="buttons"><a href="#"><img src="css/image/other.png" alt="png" /></a></div>
	<div class="buttons"><a href="#"><img src="css/image/other.png" alt="png" /></a></div>
	<div class="buttons"><a href="#"><img src="css/image/other.png" alt="png" /></a></div>
	<div class="buttons"><a href="#"><img src="css/image/other.png" alt="png" /></a></div>
	<div class="buttons"><a href="#"><img src="css/image/other.png" alt="png" /></a></div>
	</span>
	</div>
</div>
</div>
<div id="footer">

Footer

</div>
</body>
</html>

And here's my CSS:

Code:

a:link {
	color: white;
	text-decoration: none;
}

a:visited {
	color: white;
	text-decoration: none;
}

a:hover {
	color: #57330F;
	text-decoration: underlined;
}

a:active {
	color: white;
	text-decoration: none;
}

body {
	margin: auto;
	padding: auto;
	width: 800px;
	font-family: "Lucida Console", Serif;
	font-size: 12px;
	text-align: center;
	background-image: url("image/bg.jpg");
	background-repeat: repeat-x;
}

#top_links {
	margin-top: 5px;
	padding-right: 20px;
	text-align: right;
}

#top_links ul {
	margin: auto;
	list-style: none;
}

#top_links ul li {
	display: inline;
}

#header {
	margin-top: 5px;
	padding: auto;
	width: 800px;
	height: 100px;
	background-image: url("image/banner.png");
}

#header .logo {
	float: left;
	margin: 10px 0 0 20px;
}

#header .banner {
	float: right;
	font-size: 30px;
	color: #57330F;
	margin: 30px 100px 0 0;

}

/*#lower_links {
	margin: auto;
	width: 800px;
}

#lower_links ul {
	list-style: none;
	text-align: center;
}

#lower_links ul li {
	float: left;
	display: inline;
}*/

.form_login {
	text-align: right;
	margin-top: 5px;
}

#container_float {
	margin-top: 20px;
	/*height: 485px;*/
}

#container_float .content1 {
	margin: auto;
	border: 1px solid #57330F;
	background-color: white;
	float: left;
	width: 500px;
}

#container_float .content1 .content1_1 {
	margin-top: 15px;
}

#container_float .content2 {
	margin: auto;
	border: 1px solid #57330F;
	background-color: white;
	float: right;
	width: 280px;
}

#container_float .content2 .content2_2 {
	margin-top: 15px;
}

h1 {
	font-size: 12px;
}

.buttons {
	margin-top: 10px;
	margin-bottom: 10px;
}

a img {
	border: 0;
}

#footer {
	text-align: center;
	margin-top: 5px;
}

rkrause · 9th April 10, 01:19 PM

sounds to me like you're missing a tag somewhere, either opening, or closing... i'll check on it.

Ryan

rkrause · 9th April 10, 01:25 PM

If i understand your problem correctly you're trying to get the footer div to "clear" the left and right column, so that is shows directly underneath the 2 columns.

I see two issues at hand - 1 you have a span tag out of place(span class content2), is outside the content2_2 div. The 2nd thing would be to use clear:both; on the footer div.

That should do it if i understood what you're asking for.

Ryan.

jayyasay · 10th April 10, 02:53 AM

Thanks man, it worked! Man! After all this months, I've finally knew it! LOL! Cheers mate!

9th April 10, 01:19 PM	#2
rkrause WLC Mod Join Date: Sep 2009 Posts: 883	Re: Floating Problem! sounds to me like you're missing a tag somewhere, either opening, or closing... i'll check on it. Ryan

9th April 10, 01:25 PM	#3
rkrause WLC Mod Join Date: Sep 2009 Posts: 883	Re: Floating Problem! If i understand your problem correctly you're trying to get the footer div to "clear" the left and right column, so that is shows directly underneath the 2 columns. I see two issues at hand - 1 you have a span tag out of place(span class content2), is outside the content2_2 div. The 2nd thing would be to use clear:both; on the footer div. That should do it if i understood what you're asking for. Ryan.

10th April 10, 02:53 AM	#4
jayyasay WLC Member Join Date: Apr 2010 Location: Philippines Posts: 13	Re: Floating Problem! Thanks man, it worked! Man! After all this months, I've finally knew it! LOL! Cheers mate! __________________ "Instructors made me more independent..."

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode