1 reply [Last post]
tomtomA920Dude
Offline
newbie
Australia
Last seen: 16 years 43 weeks ago
Australia
Joined: 2005-04-01
Posts: 1
Points: 0

Hi there,

I'm having a problem with a css layout I'm working on. I have a container div, with a left, centre, and right div within it. My problem is that the container div is taking on the top margin of anything within it. If i change the centre div to have a top margin of 5px, for example, the container div will also give itself a top margin of 5px. Also, if i put a h1 tag within the centre div, even the top margin of the default h1 element is put onto the container div.

I want the container to have a top margin of 0, and to be able to change the centre div top margin, along with any margin of any elements within the centre div, without it affecting the top margin of the container.

The HTML is as follows:

<div id="container">
	<div id="left"></div>
	<div id="centre">
		<h1>Welcome</h1>
		<p>Bla bla bla bla bla</p>
  </div>
	<div id="right"></div>
</div>

CSS is as follows:

#container {
	width: 100%;
	margin-top: 0px;
	background-image: url(images/bodybg.gif);
	background-repeat: repeat-x;
}
#left {
	height: 300px;
	width: 150px;
	position:absolute;
	left:0px;
	top: 131px;
	margin-right: 5px;
	margin-left: 5px;
	margin-top: 5px;
	border: 2px solid #FFFFFF;
	background-color: #F7931D;
}
#right {
	width: 160px;
	background-color: #F4D0FF;
	position:absolute;
	right:0px;
	top: 131px;
	margin-right: 5px;
	margin-left: 5px;
	margin-top: 5px;
	border: 2px solid #FFFFFF;
}
#centre {
	height: 500px;
	margin-right: 175px;
	margin-left: 165px;
	margin-top:0px;
}

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 47 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Firefox Margin Issue

You have entered the confusing world of collapsed margins, also known as the Twilight Zone Smile

Read this, http://www.complexspiral.com/publications/uncollapsing-margins/

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.