Question: “When is a float not a float?”
Answer: “When it doesn’t float to the left or right.”

Today’s modern web designs are utilizing CSS for page layout. One popular CSS property used for page layout is float. The float property causes an element to float against the left or right margin of its parent element. But an often-sited drawback of using floats is that there is no easy way to center them. Most people settle by using a fixed width wrapper that contains the float (or floats). The width of the wrapper must match the float(s) total width and then the wrapper can simply be centered using auto margins. This will effectively center the floated elements as they are now contained within the wrapper. The drawback of this method is that you will need to know the width of the floated content beforehand.

In this article we will describe how you can center a widthless float or a series of widthless floats with relative ease.

(more…)

Episode 10 – 9/17/2007

Guest: Eric Meyer, CSS Guru meyerweb.com

Background: CSS Master, Author, Teacher

Total Time: 26 minutes

This is Part 2 of the Random Bits podcast with CSS master Eric Meyer. Our guest host is Tommy Olsson of Autisticcuckoo.net. I would strongly recommend you listen to part 1 if you haven’t done so already! We concluded our talk last time with a discussion on sites built in Adobe Flash. Now enjoy part 2!

Podcast Highlights

• 00:14 – We talk about the books and a possible next book
• 04:56 – Eric shares some of his struggles with CSS
• 07:42 – Let’s hear some favorite CSS tricks
• 10:51 – We talk about An Event Apart
• 17:09 – Getting personal

Play the podcast now! Notice the Random Bits podcast player on the right?
Or Download the podcast for later!
Or Subscribe to the Random Bits podcast feed!

If you browse any CSS forums you will undoubtedly see a number of posts where the answer is: “You haven’t cleared your floats.” Although the concept behind the CSS clear property is quite simple it is still a common cause of frustration among newcomers to CSS. This article will explain when and where you need to clear floats and the reasons why this is necessary.

(more…)

Episode 9 – 9/3/2007

Guest: Eric Meyer, CSS Guru meyerweb.com

Background: CSS Master, Author, Teacher

Total Time: 25 minutes

What I like about doing Random Bits is the format — it’s very different from a typical interview where it’s just a question and answer session. Instead I try to have more of a conversation with the guest and let you, the audience, ease-drop in on the conversation.

This was definitely a fun interview for me! I’ve been wanting to interview Eric for awhile now but, well, I’m only a novice at CSS so I wasn’t sure I was worthy of being in his presence.

But because I didn’t want to limit you, our audience, from diving deeper into Eric’s CSS knowledge I decided to ask Tommy Olsson, friend of Search-This and CSS guru in his own right if he would join me. That way we could represent both sides of the CSS field, that of a beginner as well as someone who is very experienced.

You will be happy to hear that this will be a two part series! So what are you waiting for? This is Eric Meyer — the CSS ninja! Start listening!

Podcast Highlights

• 00:27 – Learn some of the things Eric really enjoyed seeing implemented over the last 10 years
• 03:36 – Looking forward to CSS3
• 07:34 – They dumb things down for me
• 08:39 – We talk browsers
• 11:52 – Is IE working with the CSS community?
• 14:57 – Combating the “tables are ok” attitude
• 20:21 – Are the W3C specifications too hard to understand?
• 22:51 – Sites built in Flash *GASP*

Play the podcast now! Notice the Random Bits podcast player on the right?
Or Download the podcast for later!
Or Subscribe to the Random Bits podcast feed!

No I don’t want you to take a nap. I’d rather you took a little tour with me and explore the possibilities that the CSS z-index property has to offer. In a previous article I briefly touched on how to use z-index and thought now was the time to expand more on the subject. So wake yourself up, get your thinking caps on and follow me as we come to grips with z-index.

Try and hang with me during the technical side of things because we have a fun Lose Weight Exercise at the end!

(more…)

I’ve been thinking negatively once again and instead of keeping my thoughts to myself I thought I’d share them with you. In this article we look at how negative margins work and how to apply them in everyday usage.

A number of people suffer under the misconception that negative margins are in some way a hack; they are not. In fact negative margins are valid CSS and extremely useful in certain situations. They only become a hack if you are using them to fix an error that you have made elsewhere. In normal usage negative margins work quite well and are supported across modern browsers. However, there are issues if you use negative margins on the opposite side of a float (e.g. floating left and then using a negative margin on the right) although most modern browsers now behave the same way when this happens. In some of the examples below you will see what I mean. Let’s dive in!

(more…)

This article will show you how to highlight the current page’s link in a navigation menu using only CSS, no scripting. For example, if you have a navigation menu made up of Home, About, Contact and Products links and our viewer is currently viewing the About page then the link will be highlighted or in some way indicate that they are viewing that page.

(more…)