What float essentially does is force block level elements to not actually take up space in the document. Only floating elements will move around other floating elements, but you might find that sometimes your elements overlap or float around another when you just don’t want it. This happens very commonly when you define the height of an object such as a div, and float elements inside of it which actually will exceed the height of that div. Some browsers will not expand the containing div automatically. Other times, you might have a div floating left, and another immediately after that, but you don’t want them next to each other horizontally. For all of these problems, there is one simple and easy solution:

The “clear: both” property: Think of the clear property as a horizontal line that forces everything written after it in markup to appear below it (within the containing div). The most common implementation I’ve ever seen is a div solely created to contain this property. I’ve seen this all over the web, and I use it all the time, without any hesitation. Make a CSS declaration like this:

div.clear{
   clear: both;
}

And the HTML:

<div class="clear"></div>

Putting this div below another other set of divs will essentially create a forced break between everything written above it in the HTML, and everything written below it. This is limited to the containing div though. I personally can only think of a single situation when you wouldn’t want it limited to the containing div (if you wanted to force a two column layout to be the same height, but you just can’t do that). So yeah, stick to this… you won’t regret it!

However, CSS layout can get a little confusing when you are just starting out. So this article will discuss the different attributes you can assign to tag objects and when each of them is appropriate.

Position:
The position property has 4 possible values of static, absolute, relative, and fixed. Static is essentially the default that lets an element just fall wherever it falls. You’ll only find yourself defining an element as have a static position if you need to correct for a previous assignment of something else other than static. The fixed value will put an element at an exact location within the browser regardless of scrolling or screen size. The fixed value is always used in conjunction with the top, right, bottom, and left properties which will be discussed after positioning.

The remaining two properties are the more common definitions, and are also always used in conjunction with the top, right, bottom, and left properties. Absolute positioning is used when you want an element to exist at an “absolute” location within the page. The only difference between absolute and fixed is that fixed ignores scrolling, whereas absolute does not. So if I wanted the logo of the website I’m designing to always be located exactly 10 pixels from the top of the window, and 30 pixels from the left (and if I scrolled down the page it would go out of view), then I’d use the following CSS:

img#logo{
   position: absolute;
   top: 10px;
   left: 30px;
}

I personally think that absolute positioning is a bad idea because it leaves you with something almost as rigid as a table. To move something around you have to constantly adjust pixel positions, and use z-index in case objects overlap. This can sometimes be useful so you don’t have to layer things using background images with multiple divs, but in general, I personally choose to avoid it. Then there is the relative value. Relative positioning is exactly what it sounds like, it positions an element relative to where it should be located. So if an element naturally falls at a certain location, and you give it a “top: 10px;” and “right: 30px;” then it will appear 10 pixels further down, and 30 pixels left of that certain location. This is also occassionally useful, but I personally prefer another option… floating. This I’ll discuss soon.

Top, Right, Bottom, Left:
These four properties are used when a position of fixed, absolute, or relative has been assigned to the same element (such as a div or an img). These positions can be set using pixels or any other length measurement that CSS accepts, as well as %. They can also have negative values which is helpful to push things around when you need to. Again, I however personally prefer floating my elements.

Float:
If you ask me, the float property is the absolute best characteristic of CSS, and it blows position out of the water. Why do I love it so much? Well, I’ll admit that it can be finicky, but once you get used to how it works, it is absolutely fantastic for building very fluid designs that you can easily change. Float only has three options, left, right, or none. None is the default value. If you add a “float: left;” to your definition then that element will move as far to the left as it can, meaning within its own parent element. Giving is a “float: right;” will do the same thing but obviously to the right instead. Check out the example below of two divs, one floating left, and one floating right:

The HTML:

<div style="float: left; width: 150px; border: solid 3px #444444; padding: 5px;">
  This div will float left
</div>
<div style="float: right; width: 150px; border: solid 3px #444444; padding: 5px;">
  This div will float right
</div>

And the outcome:

So now that you see how the float works, you might be able to see why it can be so helpful. Imagine just having to change two words in your CSS file, and those two divs would switch locations. Now the reason it can get finicky is because of space issues. An element will float within its parent element as high up as it possibly can. So that means if I increased the width of those sample divs to more than half the allotted space, then the second div would be forced below the first (but still on the right side). You can apply float to a whole lot of elements, but primarily you’ll probably be using it with div, img, and p.

More notably, float is used to make text wrap around other elements such as an image. This is incredibly common and incredibly useful. Just apply a float to the image right before the paragraph and the paragraph text will wrap around it. You’ll probably also want to apply a margin so that the text doesn’t touch the image though.

Well, good luck with your positioning escapades. Let me know if you have any problems.

When writing your CSS files, you should always define your standard tags (as discussed in Setting Up Your First External CSS File). Included in that list are your copy tags. Copy tags include anything that can define the style of your copy. Most notably is the <p> tag. You also have <a> for links and <h1>, <h2>, <h3>, et cetera for headers. You also may want to consider defining the generic style for copy in your <body> tag and because of cross browser compatibility issues with Internet Explorer 6, your <div> tags. You see, if you define what you want all your copy to look like in your body tag, say font-size, font-family, color, et cetera, then IE6 will not apply this to your copy if any other tags interfere with it. So when you define your generic tag styles, it would be a safe move to define your copy style in your body, div, and p tag, and if you want to be even safer, your html tag as well!

So here are your options for defining the look of your copy in your CSS file (as always, w3schools is a great source for all of this):

That is really the basics of what you need to know for your copy. You may also include background-color as something, especially if you want white text. But basically, there you have it, the best ways to control your copy!

You know, the best tool I’ve ever found for any web developer, beginner or not, is a firefox add-on called Web Developer. It allows you to do so many things, but right now, I am touting it because it allows you to edit the CSS of ANY website you are looking at! It is a great way to learn the ropes because you see changes instantly and accurately. Try it out! Until then, try to keep your copy clean.

So first, let’s explain how to make an external CSS file. The purpose in doing this is to keep all your CSS in a separate place from your HTML. But why is that important? Well, for one, it will speed up the load time of your page for your users. Probably infinitely more important is that it is much more likely that most of the CSS you write for one of your documents will apply to another one. Why repeat it in the head of every page if you can just write it once? That way, when you need to make changes, it’ll be much easier.

Alright, so here is how you make a reference to an external CSS file. In your head section, put the following line of code:

<link href="main.css" rel="stylesheet" type="text/css" />

You can replace main.css with whatever you want to name your CSS document. Main is a good idea if you plan on having multiple CSS files (for large sites). For smaller sites, you probably only need one (for example, my website, www.davidjrush.com, has only one external CSS file (actually, technically it has two, one for the blog, and one for the rest).

You can make your new CSS file (for now, we’ll just assume you are calling it main.css) in a text writer. Change the file extension from .txt to .css just like you would change .txt to .html for an HTML file. Inside the document, you don’t need any tags, in fact, you shouldn’t have any! All you should write in this document is the style that you would have put in the head (but without the <style> tag).

Now I’ll discuss some basics of what you should have in every main CSS file you ever write for a website. There are somewhere around 80 tags for HTML, but only about 30 of them are commonly used. Of these 30 you should think about defining these basic tags: body, div, img, table, p, ul, a, and a:hover. The reasoning behind this is safety safety safety! Different browsers have different default settings for some of these tags. So the smart move is to give them all uniform settings from the start.

You may want to start your main CSS document with the following:

/*--this is a comment, you can put anything inside the star and slash--*/
body{
   margin: 0px;
   padding: 0px;
}
div{
   margin: 0px;
   padding: 0px;
}
img{
   border: 0px;
   margin: 0px;
   padding: 0px;
}
table{
   margin: 0px;
   padding: 0px;
}
p{
   margin: 15px;
   padding: 0px;
}
ul{
   margin-top: 10px;
   margin-bottom: 10px;
   margin-left: 35px;
   padding: 0px;
   list-style-image: url('image location');
   line-height: 20px; (gives spacing between list items)
}
a{
   text-decoration: underline/none;
   color: hexcode/word;
   font-weight: bold/normal;
}
a:hover{
   text-decoration: underline/none;
   color: hexcode/word;
   font-weight: bold/normal;
   /*make sure to change at least one thing from your a tag definition*/
}
a:visited{
   text-decoration: underline/none;
   color: hexcode/word;
   font-weight: bold/normal;
   /*make sure to change at least one thing from your a tag definition*/
}

Anything in red is just a comment to help you out. The first several definitions really just look at margin and padding. This is where cross browser compatibility comes into play. For example, Internet Explorer and Firefox have different default settings for margin on p tags. This will cause pages to render differently. It always seems like a safe bet to define your margin and padding for most anything. In an upcoming post, I’ll discuss defining your copy/text (which will include more specific information on p tags, a tags, and other similar issues.

You’ll notice in the links section, there is a definition for an a tag, an a tag being hovered on by the mouse, and an a tag that has been visited by the user. The latter two are called “pseudo-classes”. There are others, and they can be applied to tags other than the a tag, just so you know.

If you have any questions about this starter file, post a comment, or send me an email. Stay tuned for further CSS related posts.

CSS is a simple addition to any HTML file that you have. HTML tells the browser what to display with tags (<p>, <h1>, <a>, etc.). CSS, tells the browser what that content should look like by describing it with “style”. For a great rundown/tutorial of CSS, try w3 schools… and always, when in doubt, google it!

So let’s just give a basic example HTML file with some very simple CSS. This document shows you the style tag where you can put all of your CSS (this goes in the head tag). There are three ways of identifying what tags in your HTML get what styling, tags, classes, and IDs. Use a tag definition if you want all of one type of tag (such as a p tag) to be the same. Use a class if you’ll be using that same style for multiple items (i.e. if you want all the links in your header to look the same then use a class). Use an ID if you only plan on having one item with that style (a specific link needs to look different to have emphasis so it has different style). So this example is as simple as it gets. It shows you how to define the style of a paragraph tag, then change a group of paragraph tags using a class, and then uses an ID to make a specific instance of that paragraph tag.

The CSS and HTML

<html>
  <head>
    <style type="text/css">
      p {
        font-size: 13px;
        font-weight: bold;
        color: #000000;
      }
      .redText {
        color: #A60000;
      }
      #blueText {
        color: #1240AB;
      }
    </style>
  </head>
  <body>
    <p>This is a standard paragraph with bold text at size 13 and a grey color</p>
    <p>This is a second standard paragraph with the same styling</p>
    <p class="redText">This is a red text paragraph made using a class</p>
    <p class="redText">This is a second red text paragraph made using a class</p>
    <p id="blueText">This is a single blue text paragraph made using an ID</p>
  </body>
</html>

The Outcome:

So you’ll notice in the inside the style tag there are three definitions: one for the p tag, one for any tag with a class of redText, and one for a tag with an ID of blueText. You use a period before the name for a class, and a # before the name for an ID. Don’t mix them up or your browser won’t read them.

Safe CSS practice will encourage you to put a p in front of your .redText or .blueText definitions. This tells the browser that that specific definition for redText and blueText only applies to p tags. Then if you gave a class of redText to a link, it would not follow that styling. Sometimes however, you want to apply the same styling to different types of tags. In that case, it is alright to leave it out. Basically, use your best judgment. If you are working with a huge website, then you will have a lot of CSS, so be specific and purposeful in your naming of classes and IDs (and probably use the tag name before your definition (i.e. use p.redText instead of just .redText). If you are working with a smaller site, then you can be a little more lenient in your CSS naming efforts.

Coming up, external CSS files with a step up in CSS.

Questions? Post a comment!