CODEWITHSUNDEEP
htmlcss
jayjay
jayjay

Reputation: 1047

Wrapping parent around position relative child

Is there a way to get the outer div to wrap the 2 inner divs tightly? i.e. to be of height 150px.

<div>
    <div style="height:100px; background-color:#00cc00;"></div>
    <div style="height:100px; background-color:#cc0000; position:relative; top:-50px;"></div>
</div>

https://jsfiddle.net/44wsagv7/6/

In my actual application the inner divs are variable height, so fixing the height of the outer div is not an option

Upvotes: 0

Views: 123

Answers (3)

Stickers
Stickers

Reputation: 78726

You can add some negative bottom margin to the second inner div.

position:relative;
top: -50px;
margin-bottom: -50px;

And add this to outer div to avoid margin collapsing.

overflow: hidden;


<div style="background-color: #000000; overflow: hidden;">
  <div style="height:100px; background-color: #00cc00;">
  </div>
  <div style="height:100px; background-color: #cc0000; position:relative; top: -50px; margin-bottom: -50px">
  </div>
</div>

You can probably use only negative top margin to achieve same layout.

margin-top: -50px;


<div style="background-color: #000000;">
  <div style="height:100px; background-color: #00cc00;">
  </div>
  <div style="height:100px; background-color: #cc0000; margin-top: -50px;">
  </div>
</div>

Upvotes: 2

Shadow Walker
Shadow Walker

Reputation: 206

Add height to the parent div, It will sol. your problem of extra space at bottom. 

<div style='height:150px;'>
<div style="height:100px; background-color: #00cc00;">
</div>
<div style="height:100px; background-color: #cc0000; position:relative; top: -50px;">
</div>
</div>

Upvotes: 0

Gabsii
Gabsii

Reputation: 456

If you want the outer div to be a specific size (150px for example) just give the outer div a fixed height.

<div style="height:150px">
  <div style="height:100px; background-color: #00cc00;">
  </div>
  <div style="height:100px; background-color: #cc0000; position:relative; top: -50px;">
  </div>
</div>

Upvotes: 1

Related Questions