Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Help With Positioning

  1. 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 {<br /> background:#FFFFFF;<br /> position:absolute;<br /> top:132px;<br /> left:-5px;<br /> width:230px;<br /> padding:10px;<br /> clip:auto;<br /> z-index:-1;<br /> overflow:hidden;<br /> }</p> <p>#main {<br /> width:600px;<br /> padding-top:0;<br /> padding-left:50px;<br /> padding-right:50px;<br /> overflow:hidden;<br /> }

    The blog I need help with is macinphormer.com.

  2. 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.

  3. gnruble
    Member

    Thanks thesacredpath! That's perfect :D

  4. thesacredpath
    Member

    You are welcome.

  5. 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

  6. 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;
}

  7. gnruble
    Member

    Thanks again!

  8. thesacredpath
    Member

    You are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags