Jump to content
Sign in to follow this  
MikeJ

Extending Css Columns

Recommended Posts

In the event there's any CSS wizards here...

 

I've created a new simplistic style for my weblog (I'm a simple man). In example page shows my problem.

 

The right column is floated. All the columns line up correctly. But the document background is color #DDD, while the left column (content) background is #CCC. The problem is that if my content ends up shorter than my right column, you see the lighter shade on the bottom. My desire is that the whole left column is the darker grey whether the content fills it or not. Anyone know how I might do so?

 

The involved files:

Share this post


Link to post
Share on other sites

Hi BG.

 

This is one I think I can address. Try this (in a general kind of way):

 

Make your primary DIV (call it MAIN) the one that holds your content, with the darker background.

 

Inside MAIN, nest a DIV (say, CONTENT) that actually holds the content, and float it or position it absolutely to take it out of the flow.

 

Also inside MAIN, nest your 'other weblogs' DIV (say, OTHERS), giving it a margin-left that leaves as much space as you want for your content.

 

Voila! MAIN will grow along with OTHERS, no matter how much stuff is in CONTENT.

 

Clear as mud? If it's not, keep asking and I'll try to clarify.

Share this post


Link to post
Share on other sites

I'm not a css wizard by a long shot, but this worked okay for me.

Try changing

body{ background: #DDD; } to body { background: #CCC; }

and add

#links{ background: #DDD; }

 

This worked fine for Firefox/Mozilla/Netscape, and worked before the change in IE6, but Opera adds padding/margins to the body (all on winxp). It's kind of a work around, as it doesn't stretch the left section down, but it does give it that appearance. Give it a try and see if that's what you're looking for.

 

I like simple designs by the way, and it looks great! :)

Share this post


Link to post
Share on other sites

I believe I understand what your describing.

 

The problems I have is that either the links or the blog entries could be longer, and I think what you are describing would leave the links side dark on the bottom if the blog entries got longer, unless I'm missing something. I also want to keep the links side constant width, and only the content side change when the browser size is changed.

 

Also I'm having problems getting the content side to float instead of the current links side that is floating. No matter how do it, the links seem to drop down below the content.

 

If either of the two are set to absolute, it breaks the footer, because then the footer ignores that column.

 

If I'm missing something obvious btrfld, please elaborate.

 

And for kreiser, yea... I considered that, too, but since the content side can be longer than the links side, then the opposite happens... the links side turns dark at the bottom.

Share this post


Link to post
Share on other sites

After a lot of digging around, it's looking like it might not be doable with CSS. The hacks I've seen that work use a fixed width format which I was trying to avoid.

 

I could do it with tables, but that seems like cheating. :)

Share this post


Link to post
Share on other sites

It is a puzzlement, I agree, if either side may become the longer one. You're not missing anything obvious that I know of. But I'm certainly no CSS expert.

 

Maybe the 'Faux Columns' trick would work for you. Check it out at A List Apart.

 

I'll keep looking around, and let you know if I see other good ideas. I know there's a lot of example code out there. It's a big game of Where Did I See That Before? :huh:

 

Jim

Share this post


Link to post
Share on other sites

Hi again.

 

I found this article at The Nemesis Project site. I haven't read through it, but the description suggests that it may address your problem.

 

And on and on and ...

Jim

Share this post


Link to post
Share on other sites

Thanks. I saw the list apart one yesterday, but it was for a fixed width, only fluid height. The second one may do the trick since I want to keep the links column fixed size and only need to stretch the content. Gonna play with that now...

Share this post


Link to post
Share on other sites

Thanks for the link btrfld!!

The Faux Columns is an interesting solution. I had never been to A List Apart, and found their article on png files interesting. I'll have to experiment with that next. Too bad IE doesn't play nice with anything!!!

Anyway, off topic, but Thanks! :)

Share this post


Link to post
Share on other sites

Big Gorilla-

 

Just wanted to let you know that Jim really knows what he's talking about here. He helped me with the same problem (if not exactly the same, then it was *extremely* similar) just about a week ago. He was a great help to me!

 

Jim-

Again, you say you're not a CSS master, but you've helped out yet another person!

 

 

 

:dance: Kasey

Share this post


Link to post
Share on other sites

Thanks, Kasey. You're extremely kind. I'm just happy to be able to add a little something to this wonderful family.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...