9

I've been searching a lot for a way to allow a div to stick out of its parent.

The parent has float:right and I'm trying to make clicking it toggle show/hide a child element, but the child element shows/hides after the div. I'd like to make it "stick out" of the parent div.

Thanks! :)

Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
  • 1
    Please provide the code you've tried so far. – Tim S. Van Haren May 17 '12 at 14:34
  • How constrained are you on structure? If you want to do it this way, you can simply not have the second element be a child; place it on the page independantly if the parent, and make sure the visible property doesn't inherit.. – David Manheim May 17 '12 at 14:36

2 Answers2

5

Your explanation is not very clear, but here is a demo of a right-aligned parent div with a child div that sticks out. I hope that is what you're looking for :)

#parent {
  width: 200px;
  height: 200px;
  background-color: #FF0000;
  float: right;
  position: relative;
}
#child {
  width: 300px;
  height: 100px;
  background-color: #00FF00;
  position: absolute;
  right: 0;
}
<div id="parent">
  Parent
  <div id="child">
    Child
  </div>
</div>
rvighne
  • 20,755
  • 11
  • 51
  • 73
soimon
  • 2,400
  • 1
  • 15
  • 16
2

overflow: visible; on parent should do the trick - be careful if you have and dimensions set mind!!!

Ian Wood
  • 6,515
  • 5
  • 34
  • 73
  • 1
    Let's say other elements overflow but you want those elements to scroll. Then your approach fails. This needs arises with custom drop down elements. – Pui Ho Lam May 23 '23 at 14:30