Winnipeg Photographer

Date Posted: Mar 23, 2010

Author: Jared Heinrichs

Posted in CSS and tagged .

Visual tutorial on the “clear” property

Today I will be giving a tutorial on the clear property and how it works. I am guessing this info at some point will help you troubleshoot your code as I am sure most people run into this every so often. I’m first just going to show you the code and right after I will explain what each one does. I will also get you to change a few things to show you how the clear property works.

Let’s first look at the HTML code for the file “clear.html”.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 strict//EN">


<html>


  <head>


    <title>CSS Clear Property Tutorial</title>


    <link rel="stylesheet" href="css/reset.css">


    <link rel="stylesheet" href="css/property.css">


  </head>


  <body>


      <div id="main-wrapper" class="container">


      <div id="header">


          <h1 class="red">H1 Tag</h1>


          <p class="bold red">Hello World</p>


      </div>


      <div id="main-content" class="floatleft">


          <p>Main content</p>


      </div>


      <div id="right-wrapper" class="floatright">


          <p>SideBar</p>


          <p>SideBar</p>


          <p>SideBar</p>


          <p>SideBar</p>


          <p>SideBar</p>


          <p>SideBar</p>


          <p>SideBar</p>


      </div>


      <div id="footer" class="floatleft">


          <p>Footer</p>


      </div>


  </div>


  </body>


</html>

 

The next thing to look at is my “reset.css” file:

/* RESET CSS FILE */


html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,


pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,


samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,


legend,table,caption,tbody,tfoot,thead,tr,th,td


{border:0; outline:0; vertical-align:middle; background:transparent; margin:0; padding:0; font-family: Verdana, Geneva, sans-serif;}


* {margin:0; padding:0; }


a img { border:0; }


/*



This is called the clearfix "hack" to prevent container from colapsing


in on itself when all the elements inside are floated elements.


Make sure to add --[ class="container" ]-- to any object that you


don't want to colapse.


*/


.container:after { visibility: hidden; display: block; font-size:0; content: " "; clear: both; height: 0; }


/* start commented backlash hack \*/


* html .container   { height: 1%;     }


.container          { display: block; }


/* close commented backlash hack */


/* Easy way for me to float items */


.floatleft 	{ float:left;       }


.floatright 	{ float:right;      }


.floatmiddle 	{ margin: 0px auto; }

 

The next thing to look at is main CSS file for the tutorial “default.css”:

/* Physical Styling */


body { text-align:center; }


/* Font Styling */


h1  { font-size: 45px; color: black; }


h2  { font-size: 35px;}


h3  { font-size: 30px; font-style: italic; }


p   { font-size: 18px;}


.red { color: red; }


.bold { font-weight: bold; }


#main-wrapper { width: 600px;  margin: 0 auto; text-align: left; background-color: aqua; }


#header { width: 600px; background-color: green; }


#main-content { width: 400px; background-color: gray; background-color: teal; }


#right-wrapper { width: 200px; background-color: red; clear: right;  }


#footer { width: 600px; background-color: lime; }

 

Some of you might not be aware but you can actually have more then one CSS file linked in your HTML file. The first CSS file named reset.css basically does what it’s named. It resets all the items so that your code *SHOULD* look similar in all browsers without a multitude of hacks or IF statements. I also created some custom classes that I tend to use over and over again. Things like floating a DIV left or right is done all the time. I wanted a way of knowing inside the HTML code whether an element is floated or not. I’ve also included 1 hack to prevent container collapse. The only thing you have to do is in the HTML file add the class=“container” to the container in question that is collapsing.

Note in advance please excuse the horrible colors I chose for the background of the elements!! I did it so that it would be fairly obvious so you could follow along easier!!

Here’s what the 3 files create:

image

*Educational NOTE* – Remember when I talked about the DIV collapse hack I included in the reset.css file? If I didn’t add that the light blue (cyan) would not show up! It would be the same color as the body background which in this case is white.

As you can see from the HTML file “Header”,”Main-Content”, and “Footer” are all floated left.

You should also see that the “side-wrapper” is floated to the right.

What happens if we changed the “right-wrapper” clear property from “clear: right” to “clear:left” or “clear:both”??

image

Did you notice that the “Side-wrapper” is no longer in the “correct” position? So what is happening here? Well we know the “Cyan” color is the background color of the wrapper that is containing all the elements in place. Basically what is happening in this situation is the “Side-wrapper” is dropped down below the “main-content” element because the float has been told “Don’t continue the float on the left hand side. Right after the last element continue drawing this element.

Here’s something else to consider. What would the layout look like if the “Side-wrapper” is floated left instead of floated right? Would it look the same?

Nope. All the elements would look like none of them were floated.

image

Did you have the “ah ha!!” Moment yet?

In closing the “clear” property is used to breakup the HTML floats flow.

Leave a Reply