When to set width or height on floats

Floats that are used as inline elements do not require a specified width attribute in CSS. An inline element will take up only as much width as it needs without forcing the content that comes after it onto a new line. Inline elements include <a>, <strong>, <em>, <span>, <br>, <img>, <input>, etc.

A width must be specified for floated block level elements though, unless you want the block level element to fill up the entire width of its parent container. Block level elements span the entire width of their containing elements and force any content that comes before or after them onto new lines by default. Block level elements include <div>, <ul>, <ol>, <li>, <dl>, <dt>, <dd>, <table>, <p>, <blockquote>, <pre>, <form>, <h1>, <h2>, etc.

A height should be specified for a div that contains only floats, or it will collapse completely. Because floated elements are taken out of the normal flow of a document, a div that contains only floats will act as if it contains no content at all (and therefore collapse).

CSS Comments – A Good Thing

I am beginning to understand just how helpful /* CSS comments */ can be (or would have been!), particularly at work. Taking over support of an 800-page website with mostly-uncommented style sheets is not easy. Types of comments that I plan to add and/or use in the future:

CSS Hack Labels

Briefly describe why a hack was used, which browser it is for, what the hack is called, and a URL where the hack info can be looked up for reference. This will help anyone who needs to edit your work in the future to understand why a hack is there, and if it is still necessary.

#myDiv
{
border: 10px solid;
padding: 10px;
width: 100px !important;
width: 140px;
width/**/:/**/100px;
}

/* #myDiv uses the Box Model Hack so that it will be the same width in IE 5.x as in other browsers. See Technique Two here: http://css-discuss.incutio.com/?page=BoxModelHack */

Descriptions for Hex Color Values

Add comments with descriptive terms for hex color values to cut down on wasted time checking what colors they are equal to over & over.

#myDiv {
color: #000099; /* royal blue */
background-color: #f8f9ac; /* pale yellow */
border: 1px solid #e01914; /* red */
}

It is also helpful to comment in a table of all colors used on the site with a short description of the color’s general use as well:

/*

Hex Color Values
text	#000099	royal blue
backgrounds	#f8f9ac	pale yellow
borders	#e01914	red

*/

Table of Contents

Breaking the code down into sections grouped accordingly makes it easier to scan for what you are looking for, particularly when working with others who aren’t as familiar with your code as you are.

/*
TABLE OF CONTENTS
1 - Head
2 - Primary Navigation
3 - Secondary Navigation
4 - Main Content Area
5 - Footer
*/

/* #################### 1 - Head ################### */

#myDiv
{
margin: 0;
padding: 0;
width: 700px;
}

/* ############ 2 - Primary Navigation ############# */

#nav1
{
padding: 15px 0 5px 0;
clear: left;
border-bottom: 1px dotted #ccc;
width: 700px;}

Use em instead of px for height attribute when styling drop-down form elements

As 456 Berea Street recently pointed out in an excellent and very comprehensive article on form controls styled with CSS, there is no effective way to make them look consistent in all browsers. Nethertheless, I was called upon today to fix a styled form element that looked good in Firefox and IE6, but broke in IE7.

The form code:
<form>
<select name="sampleform" id="sampleform" onChange ="setSelected(this)";>
<option value="0">Variation 01</option>
<option value="1">Variation 02</option>
<option value="2">Variation 03</option>
</select>
</form>

The CSS that broke in IE7:
select {
width: 130px;
height: 14px;
text-align: left;
font-family: "Arial", "Helvetica", sans-serif;
color: #000;
font-size: 9px;
}

I found that by changing the height from the absolute size of 14px to the relative size of 1.8em, I was able to get the most consistent results cross-browser between Firefox, IE6, and IE7.

select {
width: 130px;
height: 1.8em;
text-align: left;
font-family: "Arial", "Helvetica", sans-serif;
color: #000;
font-size: 9px;
}

Web Developer Extension Version 1.1.2 Released

Version 1.1.2 of the Web Developer Extension for Firefox, Flock, Mozilla and Seamonkey has been released. This extension is really useful for quickly viewing and even live editing the CSS code of web pages. It is especially helpful with code tweaking and bug fixing – the “View Style Information” option will outline any element that you mouseover and show its full size and stylesheet location (with all descendent selectors) in the status bar. The extension also allows you to disable CSS so that you can make sure that your site degrades gracefully. There are many more non-CSS features that make this extension essential for web developers, including tools for analyzing forms, cookies, JavaScript, images, table depth, and more. Code validation tools are also available with one click.

Two-column layout: fine in Firefox, Safari and IE7, breaks in IE6

The code:
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example</title>
<style type="text/css">@import url(css/styles.css);</style>
<body>
<div id="container">
<div id="main">
<p>Lorem ipsum dolor sit amet, ...</p>

<p>Maecenas a enim vitae est ...</p>
</div>

<div id="sidebar">
<p>Lorem ipsum dolor sit amet, ...</p>
</div>

</div>
</body>
</html>

The CSS:
#container {
position: absolute;
top: 0;
left: 50%;
width: 606px;
margin-left: -303px;
}

#main {
float:left;
width:366px;
margin:32px;
padding: 0;
}

#sidebar {
float:right;
width:144px;
margin:32px 32px 32px 0;
padding: 0;
}

Looks fine in Firefox (and IE7 and Safari):

But breaks in IE6, with the second column dropping below the first one:

Why does this happen?
The reason the layout breaks in IE6 is due to the IE Doubled Float-Margin Bug.

The fix
Add the declaration:
display: inline;
to #main and #sidebar.

Zero out padding and margin of all elements on a page

This is a helpful CSS trick to use when creating pixel-perfect layouts. Start with a global white space reset – this rule zeros out the padding and margin of every single element on the page. After adding this rule, you must specify margins and padding for each element in the layout unless you want them to remain at zero.

* {
margin: 0;
padding: 0;
}

Avoid (or use caution when) applying this rule to pages that contain forms as it may interfere with usability.

Centered CSS Container

Method I am currently using for centering fixed width CSS layouts:

#container {
position: absolute;
top: 0;
left: 50%; /*puts margin starting point at the center of the page*/
width: 760px; /*this can be any width that you like*/
margin-left: -380px; /*this margin is negative one-half of the container width */
}

Tested in IE6, IE7, Firefox 1.5, Firefox 2.0 and Safari.