CSS Sidebar and Float trouble - Help please!

[Armagon]

Hey guys, I've been following these forums for a while, and I've recently made an endeavor to build myself a website, using wordpress as a foundation. I have the blog and MySQL all setup on my server, so now I'm attempting to build a custom wordpress theme to make the blog my own. I'm following the method outlined (http://www.webdesignerwall.com/tutorials/building-custom-wordpress-theme/) in Web Designer Wall, that is to build my site as a static HTML with the intent that it will be separated into the necessary PHP components.

For the most part I am abiding by the standard WordPress layout, with one column on the left for the content, and one on the right to form the navigational sidebar. I would like the finished product to look like this (http://dl.dropbox.com/u/3000313/Design%20Comp%205.jpg).

However, I have hit a snag. In adding the sidebar for some reason it keeps appearing below the content. I've checked that the "page" div containing them (the "content" and "sidebar" divs) is wide enough, but widening it has not resolved the issue. I eventually discovered floats and I found that floating each column left and right respectively did resolve this problem, but brought with it a new one, the background image that vertically tiled the page disappears.

I found the only way to restore the background, while keeping the columns side by side was to float the entire page itself to the left or right, which is highly undesirable as I would like page itself to be centered. If anybody can spare the time to take a look at my code and tell me what I'm doing wrong, it would be much appreciated, this has been driving me nuts for days.

You can download my current static HTML and CSS files here (http://dl.dropbox.com/u/3000313/World%20of%20Sven.zip).

[scross]

I've only had a quick look at your files and it appears that the page div doesn't encompass everything. It seems to stop before the content and sidebar div.

[Ray]

I haven't checked your files, but have you cleared the floats?

Best way being to specify a width, and overflow: hidden on the container around your columns.

[patricktt]

Hey Armagon, the reason the background disappears is because you have floated both elements in #page. When you float an element, it takes it out of the flow of the page, so essentially, #page has no height.

To fix it, simply add the following style to the #page section of your css:

overflow:auto;

And job done ;)

Patrick

[scross]

overflow:auto;

And job done ;)

Patrick

Nice work patricktt!

[Armagon]

Hey Armagon, the reason the background disappears is because you have floated both elements in #page. When you float an element, it takes it out of the flow of the page, so essentially, #page has no height.

To fix it, simply add the following style to the #page section of your css:

overflow:auto;

And job done ;)

Patrick

Thank you Patrick, this worked perfectly!

[patricktt]

good to hear :)