Make Child div inside a certain-width parent div have full browser window width

Question

I have a child div that needs to be a child of a parent div with a 1190px width and yet the child div needs to stretch the browser window. I am using position: absolute; left: 0; right: 0; to achieve this.

Now the problem is that the content below my div overlaps under my absolutely positioned div since it's no longer in the box model. I could use margin bottom on the abs. positioned div, but it needs to be dynamic in the sense that the text inside it should be able to increase and decrease without me having to change any margins.

I read that a placeholder-div might solve this. I have no idea how to do that. I tried an empty div on top of the absolutely positioned div with 'position: relative' but that did nothing.

HTML:

<div class="bonus-box">
   <div class="container">
      <span class="ribbon1"></span>
      <h3>Bonus Scoring System</h3>
      <div class="list1">
         <h4>Royalities for Back Hands</h4>
         <ul>
            <li><span>12 points for a Royal Flush</span></li>
            <li><span>7 points or Straight Flush</span></li>
            <li><span>4 points for Quads</span></li>
         </ul>
      </div>
      <div class="list2">
         <h4>Royalities for Middle Hands</h4>
         <ul>
            <li><span>24 points for a Royal Flush</span></li>
            <li><span>14 points or Straight Flush</span></li>
            <li><span>8 points for Quads</span></li>
            <li><span>2 points for Full House</span></li>
         </ul>
      </div>
      <div class="list3">
         <h4>Royalities for Front Hands</h4>
         <ul>
            <li><span>3 point for a Three of a Kind</span></li>
         </ul>
      </div>
   </div>
</div>
<!-- end bonus-box -->
<div class="placeholder-div"></div>
<h2>Special Conditions</h2>
<ul class="special-conditions">
   <li>
      <strong>1. Straights:</strong> You need to have straight in the back hand - middle hand and have your top front hand in sequence.
      <ol class="a-list">
         <li>Instant win and player wins 3 from everyone and voids all other hands.</li>
      </ol>
   </li>
   <li>
      <strong>2. Flushes:</strong> You need to have flushes in the back hand - middle hand and have your top front hand in the same suit.
      <ol class="a-list">
         <li>Instant win and player wins 3 from everyone and voids all other hands.</li>
      </ol>
   </li>
   <li>
      <strong>3. Six &amp; Half Pairs:</strong> You need to have six pairs in your hand. The last card can make three of a kind.
      <ol class="a-list">
         <li>Instant win and player wins 3 from everyone and voids all other hands.</li>
      </ol>
   </li>
   <li>
      <strong>4. 13 card wonder:</strong>If you have no pairs in your hand which means you have all cards from A - 2 you get a special bonus.
      <ol class="a-list">
         <li>Instant win and player wins 3 from everyone and voids all other hands.</li>
      </ol>
   </li>
</ul>
</div><!-- end content -->

CSS:

.bonus-box {
    background: #3f3f3f;
    overflow: hidden;
    width: 100%;
    position:absolute;
    left:0;
    right:0;
}

Answer 1

I figured the best way to do it would be using a little jQuery. Now even though pure CSS method would be the best one in an ideal world, in the real world the easiest and most efficient method is the best one imo.

To make a child div inside a certain-width parent div have a width that is greater than the parent (stretching to the full browser window width in this case), I have used 'position: absolute; left: 0; right: 0' on the child div. I also have a div inside the child div called container which centers the div with margin: 0 auto.

Now the main part to this is having a placeholder-div under the child div(bonus-box in my case), I needed to make the height of the placeholder-div equal to that of the 'bonus-box' div height. I used a bit of jQuery for this which can be seen below:

$(".placeholder-div").css({'height':($(".bonus-box").height()+'px')});

$(".placeholder-div").height($(".bonus-box").height());

var highestCol = Math.max($('.placeholder-div').height(),$('.bonus-box').height());

$('.placeholder-div').height(highestCol);

This works beautifully and now the absolutely positioned div can have as much content as needed without affecting the positioning of other page elements.

Answer 2

The placeholder div would only work if you had a static height on the .bonus-box container that could also be set on the placeholder. Since you say you need it to automatically increase and decrease its size based on content, this won't work since the placeholder div does not know the dynamic size of your .bonus-box (unless you were to use JavaScript, but this can definitely be handled in a pure CSS way).

---

Now, the easiest solution would be to set .bonus-box and .placeholder-div to the same height and be done with it. You would also need to put the <div class="placeholder-div"></div> after the .bonus-box div; otherwise, the bonus box will show up under the placeholder div since that is where its last-known static position in the page flow was.

JSFiddle example here.

Doing it this way, you would need to modify both height properties to contain the content snugly whenever text was added to or removed from the bonus box div.

---

But if you'd like to do it the more-complex but easier-to-maintain way, what you'd probably want to do is structure it so that a parent container held a min-width of 1190px. The direct children of this container then would all specify their width to be 1190px. However, the bonus box (now moved to be one of these direct children) would set its width to be 100%.

HTML:

<div id="wrapper-main">
    <div class="content-main">
        <p>Sed ut est augue. Etiam ullamcorper, leo a tincidunt commodo, felis justo posuere diam, non tempus libero purus a mauris. Integer suscipit et lectus sollicitudin convallis. Nullam mattis lorem a dui mattis, vel molestie justo mollis. Duis leo felis, cursus vitae ornare condimentum, sagittis non odio. Cras pulvinar ultrices ante, id tincidunt sem volutpat quis. Curabitur mollis ultricies nunc nec aliquam. Aliquam eleifend laoreet lacus, sit amet viverra lorem.</p>
    </div>
    <div class="wrapper-bonus">
        <div class="content-main">
            <p>Cras euismod tristique nibh non semper. Sed iaculis mi sit amet aliquam ultricies. Donec eros eros, auctor et sem vitae, fringilla condimentum nisi. Donec volutpat mauris sit amet convallis accumsan. Nam nec porttitor nulla, placerat suscipit leo. Nam tincidunt, urna a sagittis pulvinar, libero metus iaculis justo, quis fermentum dolor magna vel dui. Vestibulum consectetur mattis neque, at lacinia augue convallis nec. Fusce orci mi, auctor pretium gravida sit amet, feugiat et purus.</p>
        </div>
    </div>
    <div class="content-main">
        <p>Vivamus mollis quis lacus sed auctor. Integer ornare venenatis ultrices. Cras faucibus orci tincidunt enim sollicitudin ornare. Pellentesque dapibus iaculis ante, non imperdiet eros varius venenatis. Nulla facilisi. Cras iaculis tincidunt eros quis aliquam. Etiam mattis leo leo, ut varius tellus gravida non. Aenean id urna hendrerit, gravida leo sed, molestie nibh. Proin accumsan ultricies nulla, adipiscing ultricies urna posuere in. Vestibulum id eros leo. Etiam erat metus, vulputate sit amet lorem sed, adipiscing tempus enim. Nulla et massa sit amet nibh pharetra auctor. Curabitur odio odio, gravida eget nulla sit amet, placerat porta mi.</p>
    </div>
</div>

CSS:

#wrapper-main {
    min-width: 1190px;
    }

    .content-main {
        margin: 0 auto;
        width: 1190px;
        }

    .wrapper-bonus {
        width: 100%;
        background-color: #f80;
        }

JSFiddle here.

Of course, doing it this way would require a little bit of restructuring in your code... which may or may not be possible for whatever reason.