Forums

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

Home Forums CSS Overlapping Div’s

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #31998
    Arkitekt
    Participant

    I have a website I have been creating that is up and running and doing a pretty nice job so far. I have one small problem however, that i think will only really be a problem for people with smaller screens. I have a list of links wrapped into a div on the left side of the screen. The problem is, when you resize the window and shrink the window down, the div containing the external links overlaps the conent area div and text. How can i make the div with the external links never overlap the content div?

    the website is here: http://ksalumnimsu.org/

    my CSS for the side-links div is here below:

    #side-lnks {
    width: 56px;
    text-align: center;
    background: #FFF;
    height: auto;
    position: fixed;
    display:table;
    margin-left:auto;
    margin-right:auto;
    top: 50%;
    margin-top: -140px;
    }


    #side-lnks a img{
    padding-top: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #000;
    }


    #side-lnks a:hover img{
    overflow: hidden;
    padding: 8px;
    background-color: #F5F5F5;
    }

    My HTML for the side links is this:





    Most Wanted Image

    MSU Logo

    Star and Cresent

    Twitter Logo

    CHW Design Logo





    A little help would be much appreciated. I have read that it has something to do with the positioning of the div, but i have tried several things to no avail.

    Thanks in advance.

    #55632
    erc
    Member

    Think of your problem another way. What you want is for your page layout to never shrink to smaller than the width of your content plus the left links.

    To accomplish that, you could contain your current layout inside of a new div. Call it “wrapper” for example:


    Then give the wrapper id a min-width that’s large enough to contain the left links and the content without any overlapping.

    #wrapper { min-width: 1200px; }

    That way, as you shrink the window, your layout will refuse to get any smaller than 1200px, giving your left links enough space to exist without sitting on top of your content.

    #55633
    Arkitekt
    Participant

    THANKS! Really appreciate it. I have no idea why this was such an issue for me…. I simply couldn’t figure it out…. Figured it was something simple.

    Both solution are very usable. In this case i like Erc’s method for this site, but I can foresee many cases in the future where wolfcry’s would work well for me.

    Thanks for taking time to look at this guys… I knew nothing about web design and CSS a year ago, but steadily i am making progress.

    Thanks,

    Clark

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