Loading ...
Sorry, an error occurred while loading the content.

Re: [ydn-javascript] Re: Grid CSS

Expand Messages
  • Bryce Fischer
    np. I think Floats are what gave me the most trouble. Especially when supporting both IE 6 and other browsers. I haven t really tried the other grid frameworks
    Message 1 of 7 , Sep 29, 2008
      np. I think Floats are what gave me the most trouble. Especially when supporting both IE 6 and other browsers. I haven't really tried the other grid frameworks yet, as I don't really want to introduce any more dependencies, but what intrigued me was that they seemed to be a bit more flexible with regards to layout.

      On Mon, Sep 29, 2008 at 6:27 AM, Christian Tiberg <ctiberg@...> wrote:

      Hello Bryce!

      A big thank you for the pointer to the 960 css system. After reading through the source of that, I suddenly understood the whole concept of using float and display.

      I don't know why it suddenly clicked, maybe because the system is very clear and uses selectors with meaningful names.

      Again, huge thanks - that pointer would've been worth a beer or seven, if it weren't for the distance :)

      Best regards,
       Christian Tiberg

      2008/9/16 Bryce Fischer <bryce@...>

      CSS is like that. When I was still wrapping my head around it, YUI didn't exist, and to get consistent behaviour among the major browsers caused me to go bald (not really, been bald since I was 21). Many times I threw up my hands in despair, and used tables. I just recommend trying it out, experiment, and don't be afraid to start over if you feel you have hit a dead end.

      Also know there are other alternatives to Grid. I personally like Grid for several reasons, but there are others out there, such as Blueprint, and 960. They seem to be a bit more flexible out of the box than Grid. But they tend to force you to organize your content for design rather than content (Grid does this too to some extent, but is a bit more flexible for this, or at least that's been my observation, and am willing to admit I'm wrong).

      On Tue, Sep 16, 2008 at 9:49 AM, Christian Tiberg <ctiberg@...> wrote:

      Thanks a lot, that helps tremendously :) I guess I'll have to try to wrap my head around this after all, despite the imminent risk of implosion :)

      Best regards,
      Christian Tiberg

      2008/9/16 Bryce Fischer <bryce@...>

      You can easily customize the widths of the columns by specifying exact widths. Start with the Grids Builder here:

      There are several ways to accomplish your 3 column layout:

      1. Select the Body Columns dropdown, with the appropriate left column. Never mind the exact dimensions as you can override them fairly easy. Under the Row dropdown, select one of the 2 column layouts.

      another option:
      2. Keep the Body Columns the way they are. Under the Row dropdown, select one of the 3 column layouts.

      Use these as a starting point, then override the widths to your desire. Ensure you test on IE6 if you need to support it, as it handles borders, widths, etc different than other browsers, and may result in the 3rd column dropping below the other content.

      I quickly created this as an example:

      I used pixel widths instead of recommended em's or %, so could probably be done better, but it may provide a starting point.

      Hope that helps, and maybe someone else will chime in on how to make it better.


      On Tue, Sep 16, 2008 at 3:40 AM, Christian Tiberg <ctiberg@...> wrote:


      We really would appreciate some help with this. I'm lost when it comes to CSS, and my colleague isn't any better. So please try to help :)

      Best regards,
      Christian Tiberg

      2008/9/15 Christian Tiberg <ctiberg@...>


      We need a layout that doesn't seem to be possible using the automated builder tool.

      What we need is this:

      - 974px body width
      - A header across the whole screen
      - A 180px left *and* right panel (here's the problem - all layouts have either left or right, we need both)
      - The center split into two rows, the first one covering the whole center, and the second one split into four columns
      - A bottom across the whole screen

      Complicated as hell, but that's what we need to do. Any tips?

      Best regards,
      Christian Tiberg

    Your message has been successfully submitted and would be delivered to recipients shortly.