Code is here: http://lasers.org.ru/vs/example.html
How to remove an empty space under main block (#page)?
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.
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.
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.
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.
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.
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; }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With