Bloggerrific

The float property in CSS is a blessing if you ask me. I use it almost exclusively for layout, with occasional tables or absolute/relative positioning. The float property leaves your layout incredibly fluid so that you can change it very easily. However, there are some difficulties that are easy to run into when using the float property.

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:

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!

CSS has two primary benefits. One is the ability to easily edit the look and feel (the theme if you will) of your website by changing very little code. This is evidenced by a quick visit to the CSS Zen Garden which has the same HTML code, but uses different style sheets to make it all look completely different. The second is positioning and layout which allows to easy move different pieces on a page because it doesn’t ascribe to the rigidity of tables.

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:

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.

In a few previous posts, I’ve mentioned the all too scary issue of cross browser compatibility. In particular, Internet Explorer seems to always come up, and even more specifically, Internet Explorer 6 (or IE6). There are dozens of bugs that arise with IE6 because of how the browser reads HTML and CSS. I’ve found the best solution when you encounter a problem with how IE6 renders your code, google it. But, to make things easier for some of you, here is a compilation of some of the most serious problems that I have encountered with IE6, and if their is a good hack or fix for it, I’ll tell you about that too.

1. Padding discrepancy:
IE6 and below calculate the width and height of sizable objects differently than other browsers. This issue is easy to demonstrate with the following example of a div’s css:

div.example{
   width: 100px;
   height: 100px;
   margin: 10px;
   padding: 5px;
   border: solid 2px black;
}

Normally, this div should be rendered as actually having a width and height of 114px (100px defined width + padding-left of 5px + padding-right of 5px + border-left of 2px + border-right of 2px). Though this might seem counter-intuitive, it actually makes sense when you consider wanting to define space for copy or images, but still have padding with a background color (for example). IE6 and below makes the mistake of still defining the width and height of the div as 100 each, meaning the actual usable space inside the padding and border is now down to only 86 pixels.

There are two fixes to this. One is avoid using padding, and use margin instead (which is not included in the same way that padding and border are) when working with objects with defined width or heights. This is what I tend to do, because it doesn’t require using a hack. However, this is not always possible, especially when you are working with divs that have background colors and text inside. So, the best hack I’ve discovered so far is actually the underscore. Yeah, that’s right, _ does wonders when put immediately before a CSS style definition because every browser except IE6 ignores that line. So what you’d want to fix the above problem is the following CSS:

div.example{
   width: 100px;
   _width: 114px;
   height: 100px;
   _height: 114px;
   margin: 10px;
   padding: 5px;
   border: solid 2px black;
}

IE6 will read the first width definition, but then correct it with the second, whereas other browsers will simply skip over the second definition, leaving you with uniform renderings for the div!

2. PNG transparency:
To bring you up to speed, PNGs are far superior to GIFs in every way but one: IE6 displays PNGs with transparency incorrectly. Obviously, there are two fixes yet again. One is avoid using PNGs with transparency and use GIFs when transparency is necessary. I personally do not want to do that because the transparency on PNGs is much better than GIFs (GIF transparency can look rasterized in comparison). The other solution is some handy dandy javascript. There are a lot of these out there. You can check out this one or just google “png fix”. The only issue with these fixes is they often cause problems with background positioning for images. Sadly, you’ll have to live with that bug if you want to fix the first bug…

3. Double margin with floated objects:
Let’s say you have a div that you float to the left for positioning. Then you give it a margin on the right and bottom to give it some space before the next object begins. IE6 has a bug where it will actually double the right margin because the object is being floated. This is incredibly annoying and 100% a bug (as opposed to a discrepancy in how the browser will render something). To fix this evil little bug, add a display: inline style definition inside the floating object. That won’t work 100% of the time, so if it doesn’t work, then use an _margin: definition with half the margin that you defined. For example:

div.example{
   float: left;
   margin-right: 10px;
   margin-bottom: 10px;
   display: inline; (this will usually do it and is much easier to apply)
   _margin-right: 5px; (This will ALWAYS work, but can be more tedious and won't pass validation)
}

As discussed above, the underscore is only read by IE6 and below but will be ignored by other browsers. This should be used when display: inline will actually mess with your layout, or if for whatever reason it does not work properly.

4. Inability to center divs using auto margins
Centering a div is easy unless you are using IE6. Normally, a div with a defined width and a left and right margin setting of “auto”, will automatically center within it’s parent element. However, IE6 doesn’t like that. To fix it, add a simple “text-align: center;” definition to your html and body tags. This of course will center all of your copy, so add a “text-align: left;” to all of your other tags that might contain copy (p, div, h1, h2, h3, a, etc).

Got other bugs? Got other questions? Got other fixes? Post a comment! Also, check out the second installment of IE6 bugs!

In a recent post, CSS – Back To Basics, I discussed the purpose of CSS and how to use tags, classes, and IDs to create style definitions. In the last post, Setting Up Your First External CSS File, I discussed generic tags you should define right away in your main CSS file. This time around, for you beginners out there, I’m going to write specifically about all the different options you have for controlling the look of text in your website (or as you should call it, “copy”).

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.

In a recent post, CSS – Back To Basics, I discussed the purpose of CSS and how to use tags, classes, and IDs to create style definitions. This time around, I’ll chat about setting up an external CSS file and giving it some basic definitions that you should always include in your main CSS file.

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:

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:

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)
}

/*--links (this is a comment, you can put anything inside the star and slash)--*/
a{
   text-decoration: underline or none;
   color: desired color;
   font-weight: bold or normal;
}
a:hover{
   text-decoration: underline or none;
   color: desired color;
   font-weight: bold or normal;
   make sure to change at least one thing from your a tag definition
}
a:visited{
   text-decoration: underline or none;
   color: desired color;
   font-weight: bold or 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.