Position: relative leaves blank space

Question

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

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

Answer 1

Well then do not use relative positioning. The element still takes the place where it was originally when using relative positioning, and you cannot get rid of it. You can, for example, use absolute positioning or make elements float next to each other.

I played a little with the layout, and I suggest 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; } 

Answer 2

Another trick that worked fine for me is to use negative edge-edge in the element you moved. No need to go with absolute positioning.

Something like:

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

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

Answer 3

 #page { overflow:hidden; } 

Answer 4

 #page { padding-bottom: 0; } 

Answer 5

Try the following rule:

 #page { border: 2px solid #404241; bottom: 0; padding: 8px 16px; position: absolute; top: 70px; width: 600px; } 

I changed the position to absolute, this allows you to use the bottom: 0 property.

Answer 6

I had the same problem. Negative margin did not work for me, as it left a massive white area where before. I solved this problem in my case by manually entering the height.

 .maincontent { height: 675px; } 

Answer 7

I had a similar problem. The easiest way is to replace top with margin-top with #page .

Answer 8

I managed to get rid of the spaces using the following structure:

And here is the markup

 <div id="the-force-moved-element>I've been moved</div> <div id="the-hack-part-1"> <div id="the-hack-part-2>The quick brown fox jumps over the lazy dog</div> </div> <p>Lorem ipsum dolor sit amet...</p> 

Answer 9

This question seems to have answered well - however, all of the answers above had bad side effects in my layout. This is what really worked for me:

 .moveUp { position: relative; } .moveUp > * { position: absolute; width: 100%; top: -75px; } /** This part is just design - ignore it ... ****/ .box1, .box2, .box3 { height: 100px; color: white; } .box1 { background: red; } .box2 { background: blue; height: 50px; } .box3 { background: green; } 

 <div class="box1">Box 1</div> <div class="moveUp"><div class="box2">Box 2 - 75px up</div></div> <div class="box3">Box 3</div> 

Answer 10

My answer was late, but it can help others with the same problem as mine.

I had a <div> with position: relative; where all children have position: absolute; style. This resulted in about 20 pixels of blank space on my page.

To get around this, I added margin-top: -20px; to the next sibling element after the <div> with position: relative; ,

If you have an element of one level, you can use margin-bottom: -20px;

 section { height: 200px; } 

 <h2>Extra Whitespace</h2> <section> <div> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> <div style="position:relative;"> <div style="position:relative; top: -20px; left:100px;">ABSOLUTE</div> </div> <div> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </section> <h2>No Whitespace margin-top</h2> <section> <div> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> <div style="position:relative;"> <div style="position:relative; top: -20px; left:100px;">ABSOLUTE</div> </div> <div style="margin-top:-20px;"> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </section> <h2>No Whitespace margin-bottom</h2> <section> <div style="margin-bottom:-20px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> <div style="position:relative;"> <div style="position:relative; top: -20px; left:100px;">ABSOLUTE</div> </div> <div> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </section>