SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: Mimic tables

  1. #1
    SitePoint Zealot Beeper's Avatar
    Join Date
    Sep 2003
    Location
    LONDON UK
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Mimic tables

    Hi,

    Now I have completed correcting all the quirks and *hacks of the layout of my new website.

    So now it comes to the content.

    On my home page I want to layout out the 3 key areas of our business and, in the old days, I would have created a 3 column 2 row table with the requisite cellspacing and padding and be done with it.

    But now I am a disciple of CSS.

    So, within my content column (of a 2col with headers and footers) I want to mimic the layout of this table.

    3 columns, within a left float column... everything I try, and believe me I am a beginner at this stuff... seems to either end up doing very odd things to the rest of the layout or ending up out side its containing div. I fiddled about with z-indexes and they just made things worse.

    Could some one point me in the right direction.

    In the worst case I could remove the 2 columns from their wrapper and place the 3 col within the wrapper which might look best anyway. But to be honest I am trying to find out how to do multiple columns, I might want 4 columns one day or perhaps 5 or 6... Who knows where this could lead?

    Here is a little diagram of what I am looking for. I will not be using all 3 groups on the same page but rather want to see how to build columns within other divs.

    Never argue with an idiot.
    They just drag you down to their level...
    and beat you with experience.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    Well basically you just have to float elements next to each other. You can have as many columns as you can fit in there

    You must remember that css doesn't behave like tables (nor is it really meant to) so if you think in purely table terms then you run into the usual problems of equalising columns and float dropping etc.

    If your design is fixed with then the floats are easier to manage with pixel precision but with a fluid layout floats are designed to float. That's their job They will float and find room where they can. Some people call this the layout breaking apart while others call it fluid design

    I would put each row of floats in an outer to contain them to make them easier to manage. Of course this all does depend on what properties these columns are supposed to have.

    If you want something more complicated then you will need techniques such as used in my 3 col demos:

    http://www.pmob.co.uk/temp/4colfixedtest_5.htm
    http://www.pmob.co.uk/temp/spointfooter.htm

    However i would start with the simpler solution first and take it from there. If you need some example code then shout and I'll try and come up with something suitable.

    Paul

  3. #3
    SitePoint Zealot Beeper's Avatar
    Join Date
    Sep 2003
    Location
    LONDON UK
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent, I have fully mastered columns (as long as they are of even numbers 2,4,6,8 etc).

    What's the trick with the center column, having all sorts of nightmares with it.

    I thought I could simply create two columns float left and float right and then place another inbetween with some left and right margin but it is not that easy apparently.

    Whilst we are on the subject, I called the first lot #col1 #col2 etc and used them as DIV id's but then they went wierd in some browsers when I wanted to use them again in another row so I called them .col1 .col2 etc and used them as DIV class's and they seemed to work fine. - What is the difference between a class and an id. I tend to use id's for layout items and classes for design items such as fonts, links, text borders etc. But obviously I am missing some vital understanding.
    Never argue with an idiot.
    They just drag you down to their level...
    and beat you with experience.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    I thought I could simply create two columns float left and float right and then place another inbetween with some left and right margin but it is not that easy apparently.
    Yes it is that easy

    Just float a column left and your column right and then the centre column is static with left and right margins to clear the float.

    Code:
    #left {
     float:left;
     width:153px;
     background:orange;
    }
    #right {
     float:right;
     width:153px;
     background:orange;
    }
    #content { 
     margin-right: 160px;
     margin-left: 160px;
    }
    That gives you a left and right column with a 7px gap from the centrecontent. Of course ie has some little bugs but they are easily overcome and explained in my 3 col demos.
    Code:
    What is the difference between a class and an id.
    This is asked a lot on the forums so do a search for some more information but basically an ID is a unique reference and the rules say that you can only use it once uniquely on the page.

    It should identify an element or section specifically and therefore can only be used once.

    e.g.
    #mainnavigation

    It would be stupid to have a class of mainnavigation as then you wouldn't know which was the main one

    If you need to re-use a style then you should be using a class which can be used over and over again.

    Also if you were scripting using the DOM (document object model) and there were 2 id's the same then your script wouldn't know which was the correct one to address.

    Hope that explains a bit

    Paul

  5. #5
    SitePoint Zealot Beeper's Avatar
    Join Date
    Sep 2003
    Location
    LONDON UK
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Splendid, That clears that up nicely You're a star as usual!
    Never argue with an idiot.
    They just drag you down to their level...
    and beat you with experience.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •