CSS make absolute child div override absolute parent max-width

1
votes

Is there any way to make the child div below override its parent max-width to stretch to 100% page width? both parent and child are absolute position

<div class="container" style="max-width:500px;position:absolute;">

  <div class="content"></div>
  <div class="special-content" style="position:absolute;width:100%"></div> <!--override to 100% page width? -->
  <div class="content"></div>
  <div class="content"></div>

<div>

also the above container is currently positioned inside another image container div set to position:relative

2
htmlcss
Not, that is not possible. And what do you mean by “also the above container is currently floating inside another […]” – absolute positioned elements can not float. - CBroe
nop unless you use vw unit, but looks like you should rethink your approach. absolute, float max-width but 100% viewport, sounds weird to me :) - G-Cyrillus

2 Answers

2
votes

You could do something like this. This would force the width of the special-content container to fill the width of the window, beyond the parent container width.

JSfiddle: http://jsfiddle.net/tm752gr0/4/

HTML:

<div class="container">
    <div class="content"></div>
    <div class="content special-content"></div>
    <div class="content"></div>
    <div class="content"></div>
</div>

CSS:

.container {
    max-width:500px;
    margin:0 auto;
    /* position:absolute; */
    border:1px solid #000;
}
.special-content {
    margin:0 -1000px;
    padding:0 1000px;
    /* position:absolute; */
    width:100%;
    border:1px solid #000;
}
.content {
    overflow:hidden;
    display:block;
    border:1px solid #000;
    width:100%;
}
* {
    height:30px;
}
body {
    overflow-x:hidden;
}

Note: I commented out the position:absolute to be able to illustrate how the concept works.

1
votes

If you can use vw then try this:

Can I use

<div id="parent">
    Yay!
    <div id="child">ABC123</div>
</div>

#parent {   
   position: absolute;
   max-width: 500px;
   border: 1px solid gray;
}

#child {
   position: absolute;
   width: 100vw;
   border: 1px solid yellow;
}

Fiddle for you