9 {{ upvoteCount | shortNum }}
9 {{ upvoteCount | shortNum }}

An interesting liquid 3 column css design

by Lloyd Buchinski
7 replies
  • WEB DESIGN
    • |
I ran into these about a week ago. This first one at
The Perfect 3 Column Liquid Layout: No CSS hacks. SEO friendly. iPhone compatible.
has this info about it:
"The CSS used for this layout is 100% valid and hack free. To overcome
Internet Explorer's broken box model, no horizontal padding or margins
are used. Instead, this design uses percentage widths and clever relative
positioning."

The guy does get really intricate with a lot of divs and it is more than I
can say I really understand, but might be using it anyway. He had another
really interesting 3 col design that just got put up on display a few days
ago, but I only discovered after going back to his site for the direct url
that it is not there right now. I guess there was a problem with it.

Edit, found it.
http://matthewjamestaylor.com/blog/h...uirks-mode.htm
This one has the 2 outside columns set in pixels, and it is the middle content
that stretches. Should be handy for the 120 or 160 px wide vertical google
ads arrangements.
#3 column design #css
  • Profile picture of the author openmind
    I can do it

    All the best
    Adrian
    Signature

    http://cheapest-domain-names-ever.tornado-domains.com
    http://www.tornado-templates.com

    {{ DiscussionBoard.errors[20005].message }}
    • Profile picture of the author Joshua.Taylor
      Great layouts! I like the second one better, the two side columns don't change, just the center content column. Thanks for sharing this, Lloyd.
      {{ DiscussionBoard.errors[89853].message }}
  • Profile picture of the author Lloyd Buchinski
    Thanks for the comment Joshua, hope it wasn't premature.

    Has anyone managed to get an external style sheet out of these
    pages? They have a really nice advantage and I have spent about
    20 hours trying to pull the internal css out of a couple of them and
    get it to work as a .css sheet. And haven't managed it.

    They seem to be just a bit touchy. Or maybe the problem is the
    one I usually run into, when things take brains, talent and time I'm
    a little short on 2 of those.
    Signature

    Do something spectacular; be fulfilled. Then you can be your own hero. Prem Rawat

    The KimW WSO

    {{ DiscussionBoard.errors[214936].message }}
    • Profile picture of the author Jonno
      The style sheets are embedded, if you use the web developer plugin tool for firefox you can view just the css and copy and paste them out, but there are no external style sheets from the look of it.

      If you haven't got the web developer tool for firefox (think there is an IE version as well) its well worth getting as it allows you to edit style sheets of other web sites on the fly as well as a myriad of other useful things.
      {{ DiscussionBoard.errors[215410].message }}
      • Profile picture of the author lunarc
        If you mean the Firebug extension for Firefox, I can highly recommend it.
        Don't know how I got any browser stuff done without it.

        There a quite a few web developer focused Firefox extensions.
        The best tip I have come across lately is to create a separate Firefox profile to run all of the dev tools.

        Ben.
        {{ DiscussionBoard.errors[216474].message }}
  • Profile picture of the author Lloyd Buchinski
    I do have the web developer toolbar for ff and like it. It is especially
    handy for changing css and seeing immediately what each change
    does. (For anyone just getting into it.) I hadn't thought of using it
    to just extract all the css so I tried that after you suggested it, then
    added it to the html but that didn't work either. Also, just as a side
    note, it missed the ie conditional comments. Can't blame it for that,
    but just something to watch out for.

    These designs are intricate and just a tiny bit touchy(!)

    I also did look at it with firebug but couldn't sort out the problem
    there either. I haven't used firebug nearly as much so could definitely
    be missing something there also.

    I have been working with percentage layouts but now need an ice
    rather than a liquid layout, and a couple of these seemed ideal.

    So thanks for the comments. I don't get a day off until Tuesday now
    and probably won't be back until then. It is really nice to have a site
    work part of the forum where people don't immediately recommend a
    wysiwyg editor.

    thanks again, and best wishes, lloyd
    (Best wishes has been my favorite sig for a long long time, and I do
    feel that when I type it. It's what this life is for, the best.)
    .......__o
    .......\<,
    ....( )/ ( )...
    Signature

    Do something spectacular; be fulfilled. Then you can be your own hero. Prem Rawat

    The KimW WSO

    {{ DiscussionBoard.errors[218497].message }}
  • Profile picture of the author potionchris
    yeah its fun and simple i like the layout. its simpler than what u think. css and web 2.0 are quite handy when they come hand in hand
    {{ DiscussionBoard.errors[218742].message }}

Trending Topics