CODEWITHSUNDEEP
htmlcsspositioncss-position
mathinvalidnik
mathinvalidnik

Reputation: 1600

How to overlap 'table' and 'div' wrapped in another 'div' on window resize

I have table element and div element positioned next to each other. Both are wrapped in another div .

Her is an example : http://jsfiddle.net/7Ge4h/

<div>
    <table id="table-inside-div">
        <tr>
            <td><div>Table inside the div</div></td>
        </tr>
        <tr>
            <td><div>Table inside the div</div></td>
        </tr>
    </table>

    <div id="div-inside-div">
        <span style="background:red">Div inside the div</span>
    </div>
</div>

When I resize the output window horizontally and the table and the div get next to each other as close as possible the div goes beneath the table but I want it to just go over the table if it was with fixed position. How can I do that?

Upvotes: 0

Views: 343

Answers (2)

benka
benka

Reputation: 4742

You can add an id to the parent div and set position to relative then the #div-inside-div to absolute

#main{
    position:relative;
}

#table-inside-div{
    float:left;
    background: yellow;
    width:200px;
}

#div-inside-div{
    float:right;
    width:200px;
    position:absolute;
    right:0px;
}

http://jsfiddle.net/yknKV/3/

Upvotes: 0

Goombah
Goombah

Reputation: 2855

Like this:

CSS

@media screen and (max-width: 400px) {
    #div-inside-div {
        position: fixed;
    }
}

Fiddle

Upvotes: 1

Related Questions