Issue with responsive “div hiding below another div”

[codesandcodd]

Hi All,

Whenever size of

http://anjumsindian.hasanapp.com/

goes below 980px Right column hides behind the left column

You continue reducing and you will find that entire sidebar goes behind left column

Means smaller the resolution … more sidebar is behind left column.

Please note that I don’t have access to HTML and I am not an expert in CSS. This needs to be corrected using css only. How can I correct it? I tried a lot but nothing seems working.

Please help.

Thanks

[TheDutchCoder]

Its because #mcontainer' on line 209 hasposition: fixed;’.

Remove that and the element will not appear over the the other content anymore.

[codesandcodd]

Hello,

Thanks for the response.

Actually, I need ‘#sidebar’ below the ‘#mcontainer’… that’s why I positioned it #mcontainer as fixed.

and HTML I can not change.

Thx

[TheDutchCoder]

Okay, then you have a problem ;-)

The #sidebar comes before the #mcontainer in the HTML, this makes it always render first.

There’s no real way around it but to position both elements absolutely, but that means you need to set a height and that’s really not a good option (especially not if it needs to be responsive).

Last resort: use jQuery/JavaSctript to switch the two elements around, but that’s really not recommended.

Sorry :-(

[codesandcodd]

Someone suggested following solution but its not working in my case… don’t know why and both the inner divs has variable height

<style>
#main { display: table; }
#a { display: table-footer-group; }
#b { display: table-header-group; }
</style>

< div >
< div id=”a” >aaaaaaaaaaaaaa< /div >
< div id=”b” > This has variable height< /div >
< /div >

[TheDutchCoder]

Yes that works, just make sure to put it in the right media query.

You also need to remove all the positioning and floating from those elements.

[Author]

Posts