CSS Relative and Absolute Positioned Elements Stretch the Container

Can you help me with my dilemma? I have a container (BODY in this case) that has position:relative set. Inside it I have two div's. One relative and one absolute positioned (in this order).

The problem is that whenever I set some margin-top to the relative positioned element, the container's height (body in this case) stretches vertically.

For example, even though I have set height: 100% to the container, its size when viewed is 100% + the margin-top of the relative positioned child element.

Here's a fiddle: http://jsfiddle.net/xJ75R/7/

Answers


First of all, you should not give a relative position to the body, since body takes up the whole page.

Anyway, be specific when applying the relative position to another element, so if you have a class of "lists" then use

.lists { position: relative; top: something; left: something }

or margin, or whichever rule.

If you are just having problems with the body tag after giving some margin to ANOTHER element (though I do not see how this would happen), then give the body a margin of 0, like:

body { margin: 0; }

and if that doesn't work then use !important like

body { margin: 0 !important; }

On a side note, use firebug addon for firefox to make your CSS life easier and see what's happening on the fly.


Need Your Help

Do it the “MVC” way in Ruby - or not ? (Car->Parts)

ruby-on-rails ruby model-view-controller controller render

i`ve a theoretical question on how to implement the MVC concept the best way in Ruby (as i am more familiar with non-MVC -thx for the hint- languages like ASP, PHP).

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.