Karelia Community Forum

foofboy

Member

Sidebar Width Problem

I am having a problem inserting a Sidebar into my layout. I started with the Aqua Design, but I have heavily edited it to match the previous design of the site that I am working on.

When I insert a Sidebar, the Sidebar expands horizontally to fill the entire page, forcing the rest of the page to fall below the sidebar. While inspecting the DOM, I have determined that the culprit is the "sidebar-container" div, which is taking up a full 700 pixels! My question to the SV team is whether I should manually constrain the size of this to ~200px, or whether I am missing something obvious. While I have had some success in editing the CSS, I am not really a master designer. Any suggestions would be appreciated, as I am looking for the "right" way to do this.

Thanks!

seanc

Hero

Re: Sidebar Width Problem

Aqua does not have any declared styles for "sidebar-container", did you add it during "heavy editing"?  Try removing it.

---

Sandvox Navigation with Style

foofboy

Member

Re: Sidebar Width Problem

Thanks for the reply.

I didn't add a sidebar-container style. I have the following style defined for the "sidebar" class:

#sidebar {
    float: left;
    width: 200px;
    word-wrap: break-word;
    font-size: 0.8em;
}

The "main" class on pages with sidebar has the following style:

body.allow-sidebar #main {
    margin-right: 10px;
    float: right;
    width: 500px;
    font-size: 1em;
}

I think those are the main classes I need to worry about. Am I missing anything else?

Thanks again!

foofboy

Member

Re: Sidebar Width Problem

Figured it out. The width of the sidebar + the width of the main element must be less than the width of the page element. As with most things, it's obvious in retrospect :)

Thanks.