Crazy Fluid 2 Column CSS Design

[Schwarttzy]

Okay basically I’m trying to bring my WordPress theme Adventure back from the dead and this time I’m a lot better at coding, but I have one problem before I start adding in all the PHP code. I want to do two things, first when displayed at anything wider than 700px its two columns until the sidebar runs out, at which point the rest of the content aligns up centered. I have all ready made it to this step just fine with extremely light weight CSS. My final thing is that when some reduces the screen size to smaller than 700 pixels I want the content and the sidebar to go wall to wall with a bit of margin from the browser screen, and I can do this without even flinching.

So here’s the problem… I want the sidebar to come after the content… and for the life of me right now I cannot figure it out.

I’m doubtful that anyone can do this, but I think this would be the place if anyone could.

Demo is at -> http://schwarttzy.com/test/ be sure to re-size your browser from 400 pixels to something over 1100 pixels wide to see what I’m working at.

[Schwarttzy]

I think you have misunderstood the extent of my knowledge, and it not as simple as moving the sidebar below the content. Again the trick is to have two columns when you have both the content and the sidebar at the top, while at the same time when you run out of sidebar the content centers it’s self perfectly on the center of the screen.

Keep in mind this isn’t simple problem, only a truly amazing CSS coder will be able to figure this out.

[Schwarttzy]

I should mention that the DEMO at http://schwarttzy.com/test/ does everything right now, except for one minor detail. The sidebar has to be above the content to work, which means it display first in the smaller screen code in the @media only screen reference (When your screen is smaller than 700PX).

[pmac627]

I wish i could add a screenshot. It looks like there are a few problems on my razr maxx, both vert and landscape. The background follows you.. sometimes and usually lags. The nav sometimes follows, and is delayed. And the second article is center of the screen, not under the previous one.

EDIT: I see you wanted that to center. It looks like a glitch styled like that. Maybe if the second article is full width below the two above it.

[wolfcry911]

I fail to see the problem. Why can’t the sidebar follow the content? Why are using a list for the sections?

[Schwarttzy]

@pmac627

The background isn’t working, because your razr is struggling with the CSS3 property of “background-size:cover”

I don’t think it looks glitched, I prefer it because it is nod that the design knows that something is missing and paying attention to the layout as the content flows down the page. Also because I plan on giving the theme the ability to completely remove the sidebar and would like to have CSS code that works with or without the sidebar and not have to write anything extra.

@wolfcry911

If the sidebar follows the content it will only float up till it hits the second non floated object above it, which happens to be the content section because they are auto centering.

I use list because I find it to be more powerful than the generally over abused div and technically it is a list of stuff, but also because it looks so much cleaner when done.

[pmac627]

I’m going to have to disagree. I believe it looks glitched and unnatural and I really think that is an element of your theme that will get modified by a lot of the users that download it (and know how to fix it). If the centered articles would switch over to 100% width (or 91% to match your theme) it would look less glitchy.

As far as getting the sidebar to appear at the bottom of the page, the easiest way would be to use two elements to make actual columns. One for the articles, one for the sidebar. You could accomplish everything you want except the centering of that second article. But you could pull it off with some JS help.

[wolfcry911]

Granted divs have no semantic value and are generally overused, but they do have a place. Using a list for dividing up content, IMHO, is non-semantic. Yes, you can say its a list of stuff, but you can also say a paragraph is a list of words and a word is list of letters…

Regarding the sidebar, place it second and don’t float it – done.

[Schwarttzy]

So much for coding on here… I figured it out anyway by using absolutes inside a relative. Not something I like to do, but is works just fine.

[Schwarttzy]

And now I just don’t want to use absolutes to do it… just feels wrong.

[Schwarttzy]

I give up, time to use jQuery

[Author]

Posts