A Single Article

Read it, comment, and share it with your friends

A fluid fixed fluid CSS layout

Posted November 29 in Design.

Within a few days I read two strange and unrelated requests for help with a layout on CSS-discuss. Both asked for a fluid-fixed-fluid layout, where the left and right columns were fluid and the center would be fixed. I immediately tackled the challenge and after half an hour this is what I had: “Poster.”

Please check it out and see if it works. Especially check it out on Mac and Linux browsers. If it works allright then I will probably package it nicely and list it on Liquid Designs. Thanks!


Get a Trackback link

11 Comments

Responses to my article
  1. FoxyLady November 29, 2005

    That looks mad cool, yo. gj.

  2. pixeldiva November 29, 2005

    Cool. If anyone figures out how to do it properly with different height columns and a footer I’d be really interested.

    It’s an interesting challenge to do though - well done for getting it done so quickly - took me a while to work through the issues and get something I was happy with.

  3. Alessandro Fulciniti November 29, 2005

    Hi Christian, if you’ve missed, that’s exactly the layout I wrote and presented in CSS Layout Challenge.

  4. C Montoya November 29, 2005

    Wow, you did! And the solution is great, I was just about to announce that I got the footer working, but had yet to make it work in IE… turns out this solution is totally amazing. Thanks for showing it to me!

  5. pixeldiva November 29, 2005

    It’s good, but if you extend the left column more than twice, it overlaps the footer :(

  6. C Montoya November 29, 2005

    Are you talking about the solution I posted in the comments? Because I don’t see that problem.

  7. pixeldiva November 29, 2005

    Yeah, using FF 1.05, when i clicked add text more than twice, it overlapped the footer.

  8. C Montoya November 29, 2005

    I see. Well, FF 1.05 is a little outdated, I think the latest stable version is 1.07.

    I’m actually thinking about using that layout one of these days, it seems interesting.

  9. pixeldiva November 29, 2005

    Actually - I’ve just checked, and I must have entirely forgotten that I’d upgraded - it was actually using 1.07.

    I don’t deny that it’s an interesting layout - and I’ll be looking into how it’s done for sure, but I was just pointing out the issue so it could be resolved - I know I’d want to know if it was my layout :)

  10. C Montoya November 29, 2005

    Right, but since I found the correct implementation done by someone else, I’m not going to fix mine :)

  11. gerben December 17, 2005

    It’s good, but if you extend the left column more than twice, it overlaps the footer

    For those interested. This has to do with the content being added by a script. With normal content there’s no problem.

    PS a bit late but I just checked my referer-logs

Leave a comment

Share your thoughts with the world

You can use Markdown, or you can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>

Please keep comments respectful and on topic.

This form is guarded by Akismet, so don't waste your time trying to submit spam. It won't work. Ever.





Stay on top of new updates at this site: Subscribe to the Feed!