Help With Positioning

  • 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: (visible only to logged in users)

  • thesacredpath · Member ·

    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.

  • gnruble · Member ·

    Thanks thesacredpath! That’s perfect :D

  • thesacredpath · Member ·

    You are welcome.

  • 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

  • thesacredpath · Member ·

    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;
}
  • gnruble · Member ·

    Thanks again!

  • thesacredpath · Member ·

    You are welcome.

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