Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

position:relative leaves an empty space

Tags:

css

Code is here: http://lasers.org.ru/vs/example.html

How to remove an empty space under main block (#page)?

like image 355
Kir Avatar asked Mar 08 '11 06:03

Kir


People also ask

How do I remove relative space from my position?

The element still takes up space where it originally was when using relative positioning, and you can't get rid of that. You can for example use absolute positioning instead, or make the elements float beside each other. "and you can't get rid of that." - you can. Just use negative margin, like in the plang's answer.

Does position absolute take up space?

Position absolute takes the document out of the document flow. This means that it no longer takes up any space like what static and relative does. When position absolute is used on an element, it is positioned absolutely with reference to the closest parent that has a position relative value.

What is the position relative?

A relatively positioned element is an element whose computed position value is relative . The top and bottom properties specify the vertical offset from its normal position; the left and right properties specify the horizontal offset.

Is position absolute or relative?

position: relative places an element relative to its current position without changing the layout around it, whereas position: absolute places an element relative to its parent's position and changing the layout around it.


2 Answers

Another trick which worked fine for me is to use a negative margin-bottom in the relative element that you have moved. No need to go with absolute positioning.

Something like:

position: relative; top: -200px; left: 100px; margin-bottom: -200px; 

Similar (if not identical) to the solution I see now, from green.

like image 120
plang Avatar answered Sep 16 '22 17:09

plang


Well, don't use relative positioning then. The element still takes up space where it originally was when using relative positioning, and you can't get rid of that. You can for example use absolute positioning instead, or make the elements float beside each other.

I played around with the layout a bit, and I suggest that you change these three rules to:

#layout { width: 636px; margin: 0 auto; } #menu { position: absolute; width: 160px; margin-left: 160px; } #page { width: 600px; padding: 8px 16px; border: 2px solid #404241; } 
like image 26
Guffa Avatar answered Sep 18 '22 17:09

Guffa