Help getting footer to clear sidebar

[justincarroll]

I have a tricky layout I’m planning to build out. I’ve drafted a wire frame layout of what I’m going for here … http://3circlestudio.com/temp/layout.jpg

It doesn’t appear difficult at first, but I’m basically want liquid content (content that spans 100% width across the browser windows), but have everything else in the design fixed (operating within the confines of a centered wrapper that’s 960px wide).

There may be a better way to approach the entire structure, but the with the route I took I’m having problems getting the footer to pay attention to and clear the sidebar. Because to get the sidebar positioned as if it’s on the right-side of a 960px centered layout I had to do this:

#sidebar {

left: 50%;

margin-left: -480px;

position: absolute:

top: 0;

}

This appears to be obeying the fixed 960px, but it’s actually liquid with absolute positioning. Therefore, the footer doesn’t recognize it as part of the page.

I can make that footer obey with jQuery, but was wondering about a pure CSS solution if possible. I hope this makes sense, if not, no big, I can refine what I’ve said. Any help is appreciated. Thanks!

[justincarroll]

Hmm, ok. So the idea is to have a site that looks centered and 960px width. BUT, I want to have a featured blog story at the top of the content section that has a colored background that spans 100% width for the user’s browser. If you look at my JPG wire frame it’s the blue strip. I’m not sure how to achieve that as part of the normal page flow without positioning that sidebar absolute to make it appear as if the content area is confined, but it’s really not.

[justincarroll]

Or I could be approaching this problem all wrong. I don’t know.

[TheDoc]

Hmmmmm. I suppose it depends on what the design looks like.

Depending on how complicated the background is, you can just make everything in the sidebar area part of the sidebar background and just float it all to the right.

Doesn’t help for expanding in the future, but solves a short term problem.

What else could we do. If you think the sidebar is always going to have a certain height, you could apply a min-height to the content area.

Non of these solutions seem good to me – I feel like something is staring me in the face but I just can’t quite put myfinger on it.

[justincarroll]

Haha, TheDoc, that’s exactly how I feel! The sidebar will grow to in an indeterminate length/height so you can see now why the footer needs to clear it. Also, thanks wolfcry for the help so far.

I’ll put together a prototype of my wireframe and so people can hit it with an inspector and see what’s going on. Thanks again.

[justincarroll]

Ok, I’ve posted a prototype here … http://3circlestudio.com/temp/layout.htm

I fully understand my approach may be seriously mistaken. Any thoughts would be helpful. Thanks.

[TheDoc]

I agree, I think the articles should be divs.

[justincarroll]

Haha, AMAZING! Thank you both and thanks for the tip about line-height!

[justincarroll]

If any one of those

[justincarroll]

Sure thing, the prototype has been updated … http://3circlestudio.com/temp/layout.htm

Basically I need to make sure those content blocks, the articles on the left don’t interfere with the sidebar even if their content is very complex. Is there anything I can wrap them in to ensure they’re safe?

[justincarroll]

No, I can’t set things to the same height because that’s a cheat. Let’s say the administrator of the site puts complicated content in every story (say the articles are art directed).

I wrapped the two .one-half divs like you mentioned in a class called “container” and gave it a clearfix. Take a look at the results … http://3circlestudio.com/temp/layout.htm

It looks like any clear is going to cause a problem for the sidebar. My idea is that a solution is to ensure that anything that needs cleared on the left needs to be floated and have a width on it. Like this:

.container {

background: red;

float: left;

width: 640px;

}

I could be wrong, though. What do you think?

[Author]

Posts