Help With Positioning

  • Author
    Posts
  • #882298

    gnruble
    Member

    I’ve gotten pretty close to the layout I want using CSS, but I cant do anything with the sidebar unless I set the position to absolute. But when it’s set to absolute, the body overlaps the sidebar – so you’d have to view full screen for it to display correctly.

    I’ve tried everything. Every forum post I’ve found around the Web is going on the premise that the user has full access to the html and all that jazz… Can someone please take a look at my page and tell me how I’d go about fixing this? http://macinphormer.com/

    I know you guys don’t have access to premium themes, so you can’t tell me exactly what to do, but I know someone could give me a general answer, or at least point me in the right direction. Thanks.

    Here’s the code, if that helps at all:

    #sidebar {
    background:#FFFFFF;
    position:absolute;
    top:132px;
    left:-5px;
    width:230px;
    padding:10px;
    clip:auto;
    z-index:-1;
    overflow:hidden;
    }

    #main {
    width:600px;
    padding-top:0;
    padding-left:50px;
    padding-right:50px;
    overflow:hidden;
    }

    The blog I need help with is macinphormer.com.

    #882448

    The correct way to do this (it will require tweaking of margins, padding and such) is to float the sidebar left and float the content right such as below.

    .col-right {
    float: left;
    }
    
    .col-left {
    float: right;
    }

    The above is all that is needed for the main repositioning. Then all you have to do is adjust the margins and padding and such to get things to look right.

    #882450

    gnruble
    Member

    Thanks thesacredpath! That’s perfect :D

    #882452

    You are welcome.

    #882456

    gnruble
    Member

    Just one more question – is there any way to allow scrolling when windows aren’t at full screen? The sidebar gets hidden when the window is resized too small.

    Thanks again

    #882472

    This is because you’ve put the sidebar outside of the overall wrapper that goes around all the elements of the page. Look in #sidebar and you will see a margin-left of 316px.

    When you do things in the way you have, these are the kinds of issues you run into.

    This is a total “hack” but it fixes it.

    #wrapper {
    margin-left: 350px;
    }
    #882622

    gnruble
    Member

    Thanks again!

    #882623

    You are welcome.

The topic ‘Help With Positioning’ is closed to new replies.