Question

I have a div with position:absolute, left:0, right:0; widht:100%. This is fine with my code.
But when i have added another div, which it has width:2000px; my first div width is not expanding. Can you please suggest me.

This is my example. http://jsfiddle.net/vYhv4/

Thanks

Answer 1

The position:absolute property positions the element relative to its ancestor element, in your case that is the body of the document, which is not the width of your .displayElement class. One thing you can do to fix this is to contain both your .displayElement class and your absolutely positioned div, .box, inside of a container that is clearfixed that acts as the ancestor of your .box div, positioned relative.

Like so:

HTML

<div class="element-container">
    <div class="box">test</div>
    <div class="displayElement">
        flash slider comes here
    </div>
</div>

CSS

.element-container:before, .element-container:after {
    content:"";
    display:table;
}

.element-container:after {
    clear:both;
}

.element-container {
    zoom:1; /* ie  hasLayout fix */
    position:relative;
    display:inline-block;
}

Demo