- This topic is empty.
March 16, 2011 at 11:27 am #32024
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:
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!March 16, 2011 at 12:20 pm #55421
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.March 16, 2011 at 12:21 pm #55422
Or I could be approaching this problem all wrong. I don’t know.March 16, 2011 at 12:28 pm #55425TheDocMember
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.March 16, 2011 at 12:40 pm #55398
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.March 16, 2011 at 1:51 pm #55400
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.March 16, 2011 at 2:51 pm #55384TheDocMember
I agree, I think the articles should be divs.March 16, 2011 at 5:09 pm #55387
Haha, AMAZING! Thank you both and thanks for the tip about line-height!March 16, 2011 at 5:28 pm #55388
If any one of those
- items in the left-column uses a “clear:both”, say the content is complicated, then the sidebar will obey the first clear won’t it? How do I keep the left-column content, the
- content from being affected?March 16, 2011 at 8:27 pm #55393
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?March 17, 2011 at 9:57 am #55312
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:
I could be wrong, though. What do you think?
- The forum ‘CSS’ is closed to new topics and replies.