There are the following markup and styles - an example

<div class="parentBlock"> <div class="upperBlock">Content of upper block</div> <div class="clear"></div> <div class="childBlock"> Content of child </div> </div> .parentBlock, .childBlock, .upperBlock { border: 1px solid red; } .upperBlock { height: 200px; width: 200px; float: right; } .childBlock { height: 300px; position: relative; top: -100px; }

In the parent there is a void below.

Is it possible to remove emptiness with the help of ? Those. Expected Result Expected Result Hard to set the height the parent is not an option, because the user can change the width of the browser window

  • one
    Give all the code and all the styles that affect these two blocks, plus what you have under the style * {} - Shnur
  • Corrected the description and made a link to the example - Dmitry
  • If not difficult to add a picture of how it should look. - Shnur
  • added a picture to the description - Dmitriy

1 answer 1

Replace in class .childBlock style top: -100px; margin-top: -100px;

 .parentBlock, .childBlock, .upperBlock { border: 1px solid red; } .upperBlock { height: 200px; width: 200px; float: right; } .childBlock { height: 300px; position: relative; margin-top: -100px; } .clear { clear: both } 
 <div class="parentBlock"> <div class="upperBlock">Content of upper block</div> <div class="clear"></div> <div class="childBlock"> Content of child </div> </div>

  • Alexey, ingeniously and simply). Thank! - Dmitriy