Youāve got a gap because 525 + 225 does not equal 753!
Either reduce the width of the centercontent div, float the headermenu div left instead of right, or move the end of the menu graphic out of the logo image.
If you are using padding on a div which you have also specified the width of, e.g.
#mydiv {
width: 500px;
padding: 10px;
}
you should understand how the CSS box model works. In the example above, the overall total width of the div will be 520px; 500px is the inner width of the div, plus 10px on each edge means that the space it actually takes up is 520px wide.
ok, I understand. So is there a way to put text 10px away from the border other than making inside the div tag an other one? But Internet Explorer still uses 500px, right?
If you have a DIV with some text inside (contained in P tags, natch), you have two choices:
a) Apply 10px padding to the DIV
b) Apply 10px margin to the P
If you choose option B, you have no problem. However, if you choose A, then you need to understand the box model, and more specifically how certain browsers implement it incorrectly.
According to the [correct implementation of the] CSS box model, the total width of an element is:
EXCEPT in browsers that bork the box model like IE5.x, where the overall width will be whatever you set the CSS width property to be: 250px in our example. This has the effect of making your content (i.e. the bit inside the borders and padding) be smaller than you intended - in this case:
250 - (50 * 2) - (2 * 2) = 146px
Best practice is therefore to avoid using padding to space out your elements and try to use margins instead.
Margins are the same in all browsers; but as I explained above, IE5.x will include border widths (as well as padding) when it calculates the dimensions of an element.
How do you display a div with borders exactly the same in IE and Firefox? Or is it impossible to make divs, letās say a width and height 250px with border=1, the same size in IE and Firefox?
Ignoring the obvious fact that pixel-perfect identical pages in different browsers is not the be-all and end-all of web design, there are a few ways to āhackā certain browsers to do the same thing.
First off, you need to specify which version of IE youāre talking about - itās only the version 5 browsers that get the box model wrong, IE6 is fine (except when itās running in quirks mode, which emulates the v5 rendering engine). Google āIE6 quirks modeā for more information.
If you want IE5.x to display a div exactly the same as Firefox, the most common method (although I donāt know why, as itās also the most difficult to remember!) is Tantek Celikās original Box Model Hack. Iām not going to bother typing out a full explanation - go read Tantekās.