Learning xHTML and CSS – day 9 of 30
Let’s perform a quick recap of what we’ve covered in nine days thus far. We learned basic xHTML tags and how to style them with CSS selectors. We learned fundamental CSS style definitions, such as font size, font weight, color, background, alignment, and more. And finally, we’ve started our journey into the realm of CSS positioning. Today, we continue with floats, with a focus on clearing, one of THE most important aspects of div-based design.
Floats and clearing
Shown in the picture above is where we left off yesterday. If you recall, those paragraphs are individually wrapped with a div of class called ‘pwrap’. Those two divs are then universally styled within the CSS sheet. This means that if anywhere else in the document you create another div with class of ‘pwrap’, those styles defined in the CSS will apply to that newly created div as well.
Okay, let’s take a quick look at those styles one more time. Below is their targeting CSS:
.pwrap {
float: left;
width: 100px; height: 100%;
background-color: white;
margin-left: 5px;
}
Each one of those divs has a width of 100px and a maximum height needed to contain the text. They have a white background with a left margin of 5 pixels.
Let’s have a look at something weird. What if we remove the white background of the .pwrap divs and add a white background to the #content div. Do you think there’ll be a white background behind those paragraphs? Let’s have a look at the xHTML to try to understand it further. Below is the xHTML:
<body> <div id="pagewrap"> <div id="header"> <h1>My first website!</h1> </div> <div id="content"> <div class="pwrap"> <p> Hello World! This is a paragraph! </p> </div> <div class="pwrap"> <p> And this is another paragraph! </p> </div> </div> </div> </body>
I have decided to now show the DOCTYPE! and all of the <head> and other junk, as it’s not changing and is totally not relevant to this discussion. As you can see with the color change, all of the orange is essentially inside, or contained by the ‘content’ div. Therefore, since the ‘content’ div contains all of that stuff, if we give the ‘content’ div a white background, anything in it will also have a white background. Right? So let’s do that now. Remove the white background from the pwrap divs and add a white background to the content div. Your final CSS should look like this:
body { background-color: black; }
h1 { font-size: 20px; font-weight: bold; color: black; }
#pagewrap { background-color: white; color: black; }
#header { border-bottom: solid 2px blue; }
#content {
margin-top: 20px;
color: black;
background-color: white;
}
.pwrap {
float: left;
width: 100px; height: 100%;
margin-left: 5px;
}
And if we take a look at our results, they are shown in the picture on the right.
Okay….where the hell is the text? Why isn’t it showing?? Is this a bug?
No. This is not a bug. What we have here is a classic float. What happens during a float? The floating DIVs essentially become free of their wrapping divs. They are not contained (height-wise) by their wrapping divs, but ARE contained width-wise. Let me try to show this using imagery. To do this, and try to do it with me, let’s accomplish the following:
- Give the content div a height of 20 pixels and a red background
- Remove the 20 pixel top margin from content div
- Give the pwrap divs a white background
- Change the height of the pwrap divs to 100 pixels
If you were able to follow all of that, the resulting CSS should look like this:
body { background-color: black; }
h1 { font-size: 20px; font-weight: bold; color: black; }
#pagewrap { background-color: white; color: black; }
#header { border-bottom: solid 2px blue; }
#content {
color: black;
background-color: red;
height: 20px;
}
.pwrap {
float: left;
background: white;
width: 100px; height: 100px;
margin-left: 5px;
}
And finally, this should illustrate exactly what I’m talking about in regards to floating divs not contained (height-wise) by their wrapping div. Picture shown on right.
See that red stripe? That red stripe is our 20-pixel high ‘content’ div. And those white squares are our 100 pixel high ‘pwrap’ divs. See how, even though they’re coded such that the ‘content’ div wraps both of those ‘pwrap’ divs, they still continue outside of the ‘content’ div region?
Well, this introduces a huge problem. If we wanted to have a footer after the content div, where do you suppose it’ll show up? Instead of talking about it, let’s just do it. Let’s add a footer to our page. Do the following:
- Make a new div after the content div. Give it an ID of footer
- Make a new paragraph in the footer and write “This is our footer section”
- Use CSS to give that footer a height of 20 pixels and a green color
If you were able to follow that, this is the resulting xHTML that you should’ve obtained:
<!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> <title>My first website</title> <link href="reset.css" rel="stylesheet" type="text/css" /> <link href="styles.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="pagewrap"> <div id="header"> <h1>My first website!</h1> </div> <div id="content"> <div class="pwrap"> <p> Hello World! This is a paragraph! </p> </div> <div class="pwrap"> <p> And this is another paragraph! </p> </div> </div> <div id="footer"> <p>This is our footer section</p> </div> </div> </body> </html>
And our CSS should now look like this:
body { background-color: black; }
h1 { font-size: 20px; font-weight: bold; color: black; }
#pagewrap { background-color: white; color: black; }
#header { border-bottom: solid 2px blue; }
#content {
color: black;
background-color: red;
height: 20px;
}
.pwrap {
float: left;
background: white;
width: 100px; height: 100px;
margin-left: 5px;
}
#footer {
height: 20px;
background-color: green;
}
Let’s look at our result (shown left). Well, that’s not what we wanted, is it? As you can see, the footer is behind those paragraphs. We don’t want that, we want to be after the end of those pwrap divs. But because they’re floating divs, the browser doesn’t really understand where they’re located in respect to their height. Therefore, they invented the clear. The clear float is probably one of the most commonly used properties in regard to CSS. That’s because there are often many floating divs in a given web page, and in order to make things situated properly, they all have to clear the float. So now, if we give our footer a clear float, it will go AFTER (or below) the floating pwrap divs, because it will literally tell the browser, “hey, i’m clearing the float, meaning you need to put me at the exact location where the floating divs end”.
So let’s do that. Let’s give the footer a clear float. We do this by adding this line to our #footer CSS style definitions:
clear: [property];
where [property] can either be:
- left
- right
- both
Often, you’ll use both to clear. However, in this case, the same effect will take place if you clear left or both. Why? Because if you clear left, the footer will clear the floating divs on the left. If you clear right, the footer will clear the floating divs on the right (none). And if you clear both, well. yeah.
So let’s clear both. Our footer definitions should now be:
#footer {
height: 20px;
background-color: green;
clear: both;
}
Now that our footer is clearing the floating divs, let’s see what our result looks like (shown left). As you can see, the footer is now situated where we want it to. It’s right after the floating divs end. Remember, the content is not expanding to the full height of its children (aka the things its wrapping such as those pwrap divs). Tomorrow we’ll learn how to have it expand such that any floating div inside will be actually contained within the ‘content’ div.
For now, this is a good place to stop…
Summary
Today we introduced the concept of clearing a float. Clearing is one of the most commonly used property in CSS, as a result of a weird behavior of floating divs. We use clear floats to properly situate divs that follow a floating div. We’re only going to do two or three more lessons regarding floats, and then we should be done with floating CSS definitions. Your first project after we complete learning about floats will be to design and develop our first horizontal and vertical navigation menus. So, just so you know, in perhaps 2 maybe 3 days, you’ll be able to do just that. For now, we’re taking it slow, bits at a time.
Be sure to subscribe to the RSS feed so you can get the new post by email (via the RSS feed link or through the Email RSS Subscription on the right). Also, feel free to contact me with any questions or use my contact form to send me any private comments or questions.
Thanks for reading and see you tomorrow!
Tags: course, css, free course, html, Stylesheets, tutorial, XHTML