Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Issue with responsive “div hiding below another div”

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #175853
    codesandcodd
    Participant

    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

    #175865
    TheDutchCoder
    Participant

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

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

    #175867
    codesandcodd
    Participant

    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

    #175875
    TheDutchCoder
    Participant

    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 :-(

    #175877
    codesandcodd
    Participant

    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 >

    #175917
    TheDutchCoder
    Participant

    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.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.