margin width within container

[Cullen411]

I came across this code in Style Master

If #banner has a left and right margin of 150 them surely 300px + 468px is bigger than the container content width of 760px?
Am I right on this?

/* -- container --*/

#container {
width: 760px;
height: 1%;
margin: 30px auto;
padding: 0;
text-align: left;
}

/* -- banner --*/

#banner {
position: relative;
width: 468px;
height: 79px;
margin: 0 150px;
padding: 0;
background: transparent url(images/banner.gif) no-repeat 0 0;
}

 

[Vragabond]

You would be right. As is, the #banner will be sticking out of the container, provided that the html code places the banner inside the container.

 

[ChrisHunt]

Yeah, assuming the html is [tt]<div id="container"><div id="banner"></div></div>[/tt] it doesn't fit. I think IE will stretch div#container to fit the banner and its margins. FF will truncate it, leaving the banner 4 pixels off-centre. You'd be sensible to change the numbers to reflect what you want to happen, rather than relying on how the browser resolves the numerical inconsistency. Alternatively, you could just give div#banner [tt]margin: 0 auto[/tt].

Incidentally, you should consider giving the div, and any associated images, a different name to "banner". Some ad-blocking software will stop the browser displaying anything so-named.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd