Hi,
When I add a float directive (in the CSS) for a nested div, it (nested div) loses the background color it had earlier inherited from a parent div.
Detailed explanation: I have an html page and css as shown below (the body has a certain background color and the main div#page_wrapper has another background color).
The page displays properly until I add a float directive in the CSS for one of the divs (div#main), When I do this, the nested div element loses the background color it inherited from the main div (div#page_wrapper). (I decided to add the float to be able to add a sidebar).
I have a comment in the #main section of the CSS which shows the directive which messes the design.
Will appreciate any help in how to allow the nested div to keep it's inherited color when I add a 'float' to it's style.
Code: -------------------------------- HTML------------------------------
<html>
<head>
<link rel="stylesheet" type="text/css" href="index_test1.css">
</head>
<body>
<div id="page_wrapper">
<div id="page">
<div id="header_wrapper">
<div id="header">
Computer Science for Everyone
</div> <!-- header -->
</div> <!-- header_wrapper -->
<div id="main">
<p>
</p>
<table>
<tr>
<td>Algorithms and data structures</td>
</tr>
<tr>
<td>
This course will teach the basics of algorithms and data structures. The programming langauge which we have chosen is Python. We will cover several algorithms and data structures in this course.
</td>
</tr>
</table>
</div> <!-- main -->
</div> <!-- page -->
</div> <!-- page_wrapper -->
</body>
</html>
---------------------- CSS ----------------------------
html {
width: 100%;
height: 100%;
}
body {
background: #A1CC7D;
}
#page_wrapper {
background: #FFFFFF;
padding: 25px;
margin: 25px;
width: 700px;
}
#page {
text-align: justify;
}
#header_wrapper {
border-bottom: 1px solid #525252;
}
#main {
/* This will not work if I introduce a float to be able to accomodate
a sidebar. The div#main loses it's color which was inherited
from div#main */
/*
float: left;
width: 70%;
*/
}
4 answers
points
When you float an element that is nested inside of a <div>, the parent element will collapse unless there is an element that "clears" the float. That seems to be what is happening here: you are floating the div#main, but have no element that clears this float.
There are a few ways to fix this. You could add another <div> and style it with the following css:
clear: left;
However, that may involve adding a superfluous element. If that is the case, and you'd like to avoid an unneeded <div> you could use the popular .clearfix technique. Here is a good link that provides the code and an explanation of how .clearfix works.
http://www.webtoolkit.info/css-clearfix.html
point
Just to adding this in here but I've had pretty good luck using display: inline-block instead of using floats but it's not fully supported in ie6 or ie7. Check out some workarounds here:
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
point
First of all... divitus... but I sort of agree/disagree with the clear idea. Using empty divs which act as a class clear is not the best idea but it gets the job done. Just float left your page wrapper div and that should do the trick but I re-wrote your html and css so check this out.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<style>
body {
background: #A1CC7D;
}
page_wrapper {
background: #FFFFFF;
padding: 25px;
margin: 25px;
width: 700px;
float: left;
}
header_wrapper {
border-bottom: 1px solid #525252;
}
main {
width: 75%;
float: left;
}
sidebar {
width: 25%;
float: right;
margin: 10px 0;
}
footer {
clear: both;
}
main table {
width: 100%; }
main table th {
border-bottom: solid #000 thin; text-align: left; }
main table td {
text-align: left; }
</style>
</head>
<body>
<div id="page_wrapper">
<div id="header_wrapper">
<h1>Computer Science for Everyone</h1>
</div> <!-- header_wrapper -->
<div id="sidebar">
<ul>
<li>Sidebar List</li>
<li>Sidebar List</li>
<li>Sidebar List</li>
<li>Sidebar List</li>
</ul>
</div>
<div id="main">
<h2>Algorithms and data structures</h2>
<p>This course will teach the basics of algorithms and data structures. The programming langauge which we have chosen is Python. We will cover several algorithms and data structures in this course.</p>
<table cellspacing="15">
<thead>
<tr>
<th>Date</th>
<th>Topic</th>
<th>Whats due</th>
</tr>
</thead>
<tr>
<td>9/8/2009</td>
<td>Computer Science is Awesome</td>
<td>Hello World Program</td>
</tr>
</table>
</div> <!-- main -->
<!--
this is my footer
-->
</div> <!-- page_wrapper -->
</body>
- Thanks a lot. Your fix also worked.
points
Another way to do this is to use the <br clear="all" /> it is a simple alternative to both previous mentioned techniques.
