/me flogs his brain liberally

So as it turns out, trying to do anything clever (or stupid, in retrospect) is a bad idea when it comes to cross-browser compatibility. Mozilla and IE render css in completely different ways when it comes to trying to make boxes of text flow around one another.

The layout you see right now should be readable on just about any browser. Thing is, the compromises I went through to make it work for now make it ugly in all browsers (I think).

Does anyone know how I should go about trying to make the larger links box stay on the left, the blogroll stay on the right, and the body of text flow around that in the middle? By flow, I would optimally like it to narrow to the width available between the two link boxen at the top and then expand to fill the entire area once it is below the two link boxen.

That is not an easy task, at least given what css I know. Anyway, hints would be appreciated.

Leave a comment ?

15 Comments.

  1. So I don’t know why the layout that you’re using now is fundamentally different from the one you did before, nor do I know why you changed it. It seems like it was doing what you wanted it to do. Then again, I didn’t look at the layouts, so I have no idea.

    But barring that and assuming that you’ve looked at all the cool tutorials on how to layout three columns with a liquid center column, here’s one you might not have seen:

    http://www.saila.com/usage/layouts/

    It seems to be relatively close to what you want to do *and* has pointers to other sites with similar designs if it doesn’t work for you.

  2. Goodness, it’s GREEN!!!!!!!!! LOL

  3. Yes, very green. I like green as a change from the pure white of my other style. (:

    I studied heavily the glish.com and bluerobot examples. I’m starting to think that there is no straightforward way to do what I want to do.

    What I really want is for my main content to expand and fill the width of the browser window once it gets below my two boxes containing links.

  4. Oh. I wasn’t reading closely enough (I seem to be having that problem a lot lately).

    What you want to do is something very similar to what I have on my blog. The menu on the right is CSS float’ed. It also (and this is important) lies within the “main text box”–the black outlined thing on the page and the “content” DIV in the page source.

    So you have something like (hope this shows up):

    content div
    header
    menu div
    ...
    end menu div
    blog post 1
    blog post 2
    ...
    blog post n
    end content div
    

    I suspect that all you have to do is add another “menu” and float it the opposite direction. But maybe you’ve tried that already?

  5. There are css tricks. They are ugly hacks and involve exploiting bad functionality. When johnsontwins gets back up (moridin isn’t having a good week) you can check out the style sheet there and see some of the tricks.

    Try this site. It’s got great stuff:

    http://www.glish.com/css/7.asp

    That’s a three column layout, which is I think part of what you’re going for. It will look correctly in any major browser.

  6. No, you made the same mistake I did (understandably enough). The center column on that layout (and others) doesn’t expand when it gets past the bottom of the columns on either side. So instead of the narrow center column all the way down the page, you’d have a narrow center column some of the way down the page and then a big fat content area.

    (actually, it’d all be one big fat content area, but it wouldn’t look that way in the brower)

  7. yeah, I’ve been to the glish tutorial. It’s well written, but like Nathan points out, it doesn’t provide for the center column expanding out like I’m trying to achieve.

  8. Melissa, can you help with the colours?

  9. By “help” do you mean twist dave’s arm until he admits its a horribly ugly green? No, i’m just kidding about that. I love green and I like the style. My point is if you use Mozilla, you can change the style yourself. View ~ Use Style ~ ivory tower.

    Or maybe this isn’t what you meant at all. I’ll go home now.

  10. dave did say something about posting links for us uninitiated mozilla users…

  11. Oops. Sorry angel! Since dave is hard at work and I’m a slacker grad student i should tell you that you can find such things at mozilla.org

    Cheers!

  12. this has nothing to do with programing, i just think it’s interesting

    Mathew 5
    21 “You have heard that it was said to those of old, “You shall not murder,[1] and whoever murders will be in danger of the judgment.’ 22But I say to you that whoever is angry with his brother without a cause[2] shall be in danger of the judgment. And whoever says to his brother, “Raca!’ shall be in danger of the council. But whoever says, “You fool!’ shall be in danger of hell fire. 23Therefore if you bring your gift to the altar, and there remember that your brother has something against you, 24leave your gift there before the altar, and go your way. First be reconciled to your brother, and then come and offer your gift.

    From this text it seems to me that is up to the offender to settle accounts with his/her friend when they have sinned against them. Even if it was unintentional. That’s what i see anyway.

  13. If Jerry’s post doesn’t make sense to you, don’t ponder too hard, it wasn’t meant to. He’s just practicing parasitic blogging, that’s all.

Leave a Comment

NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>