Make width from child DIV larger than parent div with CSS

Question

is it possible to make the 'width' from a child DIV larger than the 'width' from the parent DIV... (with css only)

Please see the following example for more details:

http://jsfiddle.net/6UFs4/

    <div id="main">
  <div id="sidebar">DIV1
        <div id="sidebar_2">DIV1 Sub</div>
  </div>
  <div id="page-wrap">DIV2</div>
</div>

#main
{ 
    display: block;
    width: 100%;
}
#sidebar    
{
    background-color: Aqua;
    float: left;
    width: 80%;
}

#sidebar_2    
{
    background-color: Lime;
}

#page-wrap  
{
    background-color: Gray;
}

The size from DIV1 Sub should be 100% from browser window and not limited from parent DIV. I tried using overflow: visible but it´s not working...

Any ideas? Thanks in advance.

possible duplicate of [Is there are way to make a child DIV's width wider than the parent DIV using CSS?](http://stackoverflow.com/questions/5581034/is-there-are-way-to-make-a-child-divs-width-wider-than-the-parent-div-using-css) — Ciro Santilli OurBigBook.com, Jun 28 '14 at 09:09

score 0 · Answer 1 · answered Mar 25 '13 at 08:53

You can use position:absolute and width:100%; to meet your requirements but you have to be careful about position of your element(x and y axis with respect to page) inorder to show your image at desired location

See the example: http://jsfiddle.net/6UFs4/2/

score 0 · Answer 2 · answered Mar 25 '13 at 08:54

0

Yes you can by changing its positioning.

jsFiddle

enter image description here

#sidebar_2    
{
    background-color: Lime;
    position:absolute;
    left:0;
    right:0;
}

answered Mar 25 '13 at 08:54

Daniel Imms

47,944
19
150
166

I don´t know really why but in my code this is not working... Just on JSFiddle I can see that it is working but not in my code... Is there a problem with IE8? – Simon Mar 25 '13 at 10:09
I just tested it in IE8 and it works fine. It may have issues if you have a `position` rule on any of its ancestors. – Daniel Imms Mar 25 '13 at 10:52

score 0 · Answer 3 · answered Mar 25 '13 at 08:54

0

Just add this css to your child div:

#sidebar_2 {
    position:absolute;
    left:0;
    right:0;
}

Demo: http://jsfiddle.net/6UFs4/4/

answered Mar 25 '13 at 08:54

Eli

14,779
5
59
77

Make width from child DIV larger than parent div with CSS

3 Answers3