AlexCline.net » CSS Tips and Tricks

Correcting the 2 pixel difference in the width of a div in IE and Firefox.

Alex — Wed, 28 Jun 2006 14:10:53 +0000

This is one I struggled with for a long time. The menu at the top of my site was always giving me trouble. It would always be two pixels off when I looked at it in firefox vs. IE. This is because IE screws up the box-model. I won’t go into what exactly it screws up, but I’m telling you it does.

There is a simple fix to the problem though. It requires the use of a wrapper div. By creating a wrapper div, the two pixel difference is correctly compensated in both IE and other CSS2 compliant browsers. Here is the code:

#wrapper {
  border-style : none;
  width : 750px;
}

#mydiv {
  width : 100%;
}

Then the HTML is pretty straight forward too:

100% height divs

Alex — Wed, 28 Jun 2006 13:50:04 +0000

This is a problem I ran into recently while working on a new website. How do you make a div extend the full length of the browser window? This used to be the domain of tables (yuck!), but CSS comes to save the day. Here’s the code:

html, body {
  /* We'll tell the browser to use the whole window to display our
      site, not just the space the content takes up. */
  height : 100%;
}

#wrapper {
  /* Now, we tell the div to be the full length of the window. */
  height : 100%;
}

I did run into a little snag. When the div is 100% of the window, setting a border(i.e. border : 1px solid #666;), bumps the div to be just a little too big, creating a vertical scroll bar. To fix this, only define the left and right borders(i.e. border-left : 1px solid #666; border-right : 1px solid #666;) This way, the top and bottom don’t have borders.

Centering content using CSS

Alex — Wed, 28 Jun 2006 13:43:36 +0000

This is an often asked question:

How do I center stuff on my website without using tables?

The answer is amazingly simple. It also validates as correct CSS, and best part of all… it doesn’t use tables!
Here is the CSS:

body {
  /* We'll make sure IE centers the stuff properly. */
  text-align : center;
}

#wrapper {
  /* We'll center the content for all other GOOD browsers.
      IE doesn't center properly with this. */
  margin : 0 auto;
  width : 50%;
}

Here is the HTML: