Help!

Right. This is your last chance to save bowblog’s three-column layout. Most of you (the Explorer users, basically) don’t even know this is a three-column web site because, for you, the third column displays somewhere down there (underneath the left-hand column). Some of Britain’s finest minds have examined my CSS and HTML and no one seems able to fix it so that the right-hand column displays where it ought to over there on the right (although the esteemed Phil Gyford did improve things markedly). So (trying not to sound desperate), if you reckon you’ve got what it takes, why don’t you sort it out for me and I’ll send you a bottle of Champagne (own brand, natch). I guess you can just view source if you need the HTML and here’s my stylesheet.

11 comments

  1. I can see a couple of problems that need to get fixed first.

    By the way I am using Firefox and it still looks screwed up (the main page looks good this page and other pages doesn’t).

    your page doesn’t validate as valid xhtml. check the link at the bottom of your page.

    one thing i can see is the replace the with &gt so it doesn’t confuse the parser. it looks like it’s some weird tag.

    There are also quite a bit of other errors that need to be fixed such as omited closing tags etc that doesn’t really matter but would help you find out what’s wrong.

    Another thing is in your style sheet try making the width of the item #container a bit bigger it might just be the way it’s rendering it that makes it go back to the bottom

    Also, If you would like to, you can look at my blog I have a 3 column layout that you can copy the code from a look at.

  2. I’d love to help, but there’s a lot wrong with the html as well as the style sheet. I can get it mostly right by removing the float:left styles and replacing it with absolute positioning, but the html is so poor you can’t reliably do it right even then.

    Do you have control over the html output itself, or just the styles?

  3. Hi,

    First problem: your comment div tag doesn’t end properly.

    Second problem: rightbar style should be float: right not left, if you want it on the right.

    Third problem: It looks like you forgot your margin while computing size for container, try something bigger than 702 px for width.

    I have an offline page/style here that seems to be ok in mozilla and IE, if you want it, drop me a mail.

  4. It’s quite easy:
    – fix the weird “< MM.T /div>” tags to be proper “</div>” tags.
    – set the “rightbar” to float: right
    – set the width of the “content” div and actual “body” to 744px so it actually fits all three columns (or better yet, don’t use fixed pixel widths)

    BTW, this needs quite a lot of work before it really validates as proper HTML/CSS.

  5. It’s quite easy:
    – fix the weird “< MM.T /div>” tags to be proper “</div>” tags.
    – set the “rightbar” to float: right
    – set the width of the “container” div and actual “body” to 744px so it actually fits all three columns (or better yet, don’t use fixed pixel widths)

    BTW, this needs quite a lot of work before it really validates as proper HTML/CSS.

  6. Everyone should move to Firefox, it looks great to me. No idea about the code, but did I ever (oh yes, on day three when there were only six tags).

  7. This is a really useful blog. Without reading this I wouldn’t know about and now use Firefox. Plus I’m learning about code and it is really handy to read stuff like this.

Leave a comment

Your email address will not be published. Required fields are marked *