Size of div container is equal to size of two child divs, but divs drop in IE

HTML & CSS
1

Hey all,

I am having a floating issue in IE 8 with this site:

HL Law Group

The divs involved are the following:

#wrapper div 980px

#main div 698px
25px padding on left and right

so 698 + 25 + 25 = 748px

#panel div width 230px and border left and right 1px
so 230 + 1 + 1 = 232px

748 + 232 = 980px

which is the width of the wrapper

This works fine on Google Chrome, Firefox, and Safari.

However, on IE 8, something strange happens.

  1. On the home page, the #main div drops below the #panel div, as if the main div is too wide to fit within the wrapper, but math above shows this behavior shouldn’t happen

  2. If you go to the about page, you will notice that the #main div is not snuggled up against the #panel div, but rather there is a gap between them. But the math above shows that there should be no gap. So between the home and about pages, in IE, two very strange behaviors occur.

In Google Chrome, Firefox, and Safari, it displays as expected.

Thanks for response.

2

For the first problem, try changing this:

#panel h4 {
  color: #FFFFFF;
  [COLOR="Red"]margin: 0.5em;[/COLOR]
  text-align: center;
  text-shadow: 0.1em 0.1em 0.2em black;
}

to

#panel h4 {
  color: #FFFFFF;
  [COLOR="Red"]margin: 0.5em 0;[/COLOR]
  text-align: center;
  text-shadow: 0.1em 0.1em 0.2em black;
}
3

Thanks for response. What might be the cause of the gaps between the panel and main content div?

4

So added margin: 0; and padding: 0; to all divs that didnt have a pixel set to them and it appeared to address the gap in IE, mostly. But now I am forced to do a less efficient way of aligning text within the main div. I have to add padding, not to the main div (that would cause the gap in IE), but rather I have to add padding to the h1, p tags within the div, each one of them in order to space them away from edge of div. It seems pretty inefficient, but only solution I can think of.

5

go back to the way you had it before.
then try adding this as the FIRST LINE of your code:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

btw, all your HTML should begin with a DOCTYPE

hope that helps

6

O dear, I should have spotted that. Well done, D_P!

7

Amazing. That fixed a number of IE issues I was having, including a piece of javascript that was acting funky in IE.