5 replies [Last post]
jealguire
jealguire's picture
Offline
newbie
Ketchikan, Alaska
Last seen: 2 years 40 weeks ago
Ketchikan, Alaska
Timezone: GMT-9
Joined: 2011-12-21
Posts: 2
Points: 3

The html and css below should, in my thinking, display a blue box with a green one centered inside of it. Instead, the top margin of the green box starts at the top of the page, and pushes the blue box down by the top margin amount. This happens in Safari 5 and Firefox both. I don't understand why this is happening.
Thank for any help or thoughts.
Jim

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
 
<style type="text/css">
body {
	position: relative;
	margin: 0;
	padding: 0;
}
#bottom {
	position: relative;
	margin: 0;
	width: 500px;
	height: 400px;
	background-color: #09F;
}
#middle {
	width: 400px;
	height: 300px;
	margin: 50px;
	background-color: #0F3;
}
</style>
</head>
 
<body>
 
	<div id="bottom">
  	<div id="middle">
  	</div>
  </div>
 
</body>
</html>

TymArtist
TymArtist's picture
Offline
Regular
Chicago
Last seen: 2 years 40 weeks ago
Chicago
Timezone: GMT-6
Joined: 2005-11-23
Posts: 31
Points: 8

You've got a position:

You've got a position: relative attribute set on the #bottom div, so why not try styling the #middle element like this instead:

#middle {
	width: 400px;
	height: 300px;
	position: absolute;
	top: 50px;
	left: 50px;
	background-color: #0F3;
}

I find absolute positioning within relatively stationed containers to be one of the coolest gifts within CSS.

jealguire
jealguire's picture
Offline
newbie
Ketchikan, Alaska
Last seen: 2 years 40 weeks ago
Ketchikan, Alaska
Timezone: GMT-9
Joined: 2011-12-21
Posts: 2
Points: 3

absolute positioning

Thanks for your comment and suggestion. I have always looked at absolute positioning as something to do when all else fails. Perhaps I'll have to rethink that idea.

Jim

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 6 weeks 2 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2037
Points: 2259

jealguire wrote: The html and

jealguire wrote:

The html and css below should, in my thinking, display a blue box with a green one centered inside of it. Instead, the top margin of the green box starts at the top of the page, and pushes the blue box down by the top margin amount. This happens in Safari 5 and Firefox both. I don't understand why this is happening.
Thank for any help or thoughts.

Are you talking about collapsing margins? This is normal behavior.

Try this:

#bottom {
	border: 1px solid #09f; /* add this */
	position: relative;
	margin: 0;
	width: 500px;
	height: 400px;
	background-color: #09F;
}

jealguire wrote:

Thanks for your comment and suggestion. I have always looked at absolute positioning as something to do when all else fails. Perhaps I'll have to rethink that idea.

No, I think you had it mostly right. Absolute positioning on major layout elements is fragile with tons of got'chas if you don't know what you're doing. If you're using it as a last ditch effort then you can safely assume you're wrong about something.

I consider this a Triumph.

TymArtist
TymArtist's picture
Offline
Regular
Chicago
Last seen: 2 years 40 weeks ago
Chicago
Timezone: GMT-6
Joined: 2005-11-23
Posts: 31
Points: 8

Verschwindende wrote: No, I

Verschwindende wrote:

No, I think you had it mostly right. Absolute positioning on major layout elements is fragile with tons of got'chas if you don't know what you're doing. If you're using it as a last ditch effort then you can safely assume you're wrong about something.

I'm not sure that's an entirely accurate statement - sure, absolute positioning it can be daunting, but in some cases it can save your layout integrity if you're positioning three or more elements within a container. In my opinion, there are no hard and fast rules to CSS other than have fun and try new things, because that's how you learn and become awesome at it.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 6 weeks 2 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2037
Points: 2259

TymArtist wrote: I'm not sure

TymArtist wrote:

I'm not sure that's an entirely accurate statement - sure, absolute positioning it can be daunting, but in some cases it can save your layout integrity if you're positioning three or more elements within a container. In my opinion, there are no hard and fast rules to CSS other than have fun and try new things, because that's how you learn and become awesome at it.

The point is if there is no plan or reason for using absolute positioning and you're just throwing it at a problem then you most likely shouldn't be using it. I don't consider it daunting, I do consider it inappropriate for this case, especially when the solution doesn't require it.

You are correct, there are no hard and fast rules but there are tried and true precepts developed personally and collectively by professionals in the field. There's no use going another way just because.

I suppose you'd have to show me a design that, in your opinion, specifically requires absolute positioning.

I consider this a Triumph.