[chazthetic]

I'm designing a wordpress theme for my blog, and I'm having somewhat of a complicated issue. Without going into too much detail, here's the issue:

Here's the original design I was thinking: http://www.swye.net/Dev/Swye-compA3.jpg

Here's the sliced and coded version I'm working on: Swye.net - Living Naturally
(i'm still working on the menu and I'm obviously having problems with the colors of my PNG's, but it's still a work in progress)

Now, I found a template that was similar layout wise, but it uses floated columns. That's totally fine and usually works for most instances, but when I was trying to make all my columns fill the whole "container" div vertically, I obviously ran into issues, so I used the faux columns approach which I did on my portfolio site.

Here's where the issue comes in. To make the container div background go all the way to the bottom, I've taken the float off the main collumn, the longest and obviously most important column. That fixed my main issue, but the right column is appearing below the content. There's an obvious fix of putting the column div before the content, but I've read over and over again to put your content first and sidebar info second.

Any ideas on how I can put that right sidebar in the right place and not mess up anything? would I use "display:inline?"

[chazthetic]

I found an interesting work around that I'd never heard of before. The basic ghist of it is to add "overflow:hidden; to the container div and apparently that makes the container flow down to "contain" the floats.

Anyway, i tried it, and it works great, but now I have to figure out how to get my menu div background to go all the way to the right.

Workaround article: CSS - Clearing floats

Swye as it stands: Swye.net - Living Naturally

[pgo]

This is the float clearing method I use, modified from the one in this article.

New clearing method needed for IE7? | 456 Berea Street

It simply requires that anything you want to contain (and clear) floats should have class="clearfix". This is fine since you can declare multiple classes on an element. For example, <div class="news-item clearfix">

In my main CSS file:

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

In my IE6-7 CSS file:

.clearfix {
  height: 1%;
}

Anything will work for IE that gives something "hasLayout". That's why it's working for you - overflow gives "hasLayout" to IE. Sometimes in my IE-only stylesheet, I'll use the Microsoft proprietary "zoom: 1;".

Why would I use invalid, MS-proprietary code, you ask? Well, as long as I'm hacking...

[chazthetic]

hmm. i tried that and it didn't work, but could that be because I have an ID specified as well as a class? i wouldn't think that would make a difference.

[chazthetic]

nevermind, it worked!!!
thank you so much dude.

noooow, the only thing I have to do is make the right column flow all the way to the bottom. hmmmm. any ideas?

by the way: updated URL: Swye.net - Living Naturally