Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

CSS & HTML: Div Grid

Bottom of Page

1 to 13 of 13

  1.  
  1.  permalink
    Can anyone tell me if the following is possible using only css and html.

    I'm currently revamping a site. On the main page there is a table 3 columns, 3 rows. The tds have been coloured to give the appearance that these are actually 9 boxes sat next to and under each other. Like so:

    1-2-3
    4-5-6
    7-8-9

    I'd like to change these to divs however the reason the original designer has used a table (I'm guessing) is because if the content in one box is slightly larger than the others the whole row gets larger, making the boxes all seem the same size. I could easily replace these with divs but I I have no idea how I'd get div number one to the same height as div 3 if there is less content in that box.

    Is it possible to do this with just css and html or am I best just sticking with the table?

    Many thanks in advance.
  2.  permalink
    Tables are for tabular data - so if it is, keep it in a table! If it's just for layout, you could use an ordered list. This way if CSS is disabled, the content of the 'cells' would be listed in order, 1 to 9 keeping it usable.

    Mike
  3.  permalink

    Check out the cross-browser inline-block article from Mozilla Webdev.

  4.  permalink
    hello,

    on the other side , inline-block , will not set every element to the same height .

    display:table does , but then , where is the purpose ? your table is just fine .

    If you want every elements of a same row of the same height and cross-browser , make each one single table .
    tables are tables , div or else are not table , and so one ... "table VS div" doesn't exist to my point of view.

    If you still want to drop tables cells for neutral div element , you will need a javascript to reset size on loading or forget about IE less than version 8 .

    If you have no other issue than to use tables because a weekness (if it is ) of CSS or you knowledge level , there's no big deal about it , just be wise , you will not be prosecuted ;)

    GC
  5.  permalink
    Thanks for the help so far everyone.

    After reading through your comments I've decided perhaps a table is the best option. However now I have a whole load of new problems.

    http://3skimo.com/mg/reviews.html

    I'm trying to get the stars to stick to the bottom right of the td and have been googling for solutions for the last hour with no luck. Is there a way of doing this without affecting all images in the cell? Also is there any way I can get a dropshadow on each of the table cells, keeping in mind the cells stretch and resize with the browser?

    Thanks again for all the help.
    •  
      CommentAuthorTetsuo
    • CommentTimeMar 5th 2009
     permalink
    This is why I would not be using tables for this task. I would suggest you use CSS positioning instead, as kari.patila mentioned.

    If you did that, you could set this to the containing element:
    position:relative

    And then you can just set this to your stars element:
    position:absolute:right:0;bottom:0;
  7.  permalink
    I can't seem to get the example kari.patila mentioned to work. I did play with this earlier on and I'm sure it's just me being stupid and doing it wrong but it gave me this:
    http://3skimo.com/mg/reviews1.html
  8.  permalink

    That works perfectly fine for me, on Safari at least. Which browser is giving you trouble?

  9.  permalink
    Firefox 3.0.7. It does what I want it to do besides the fact the boxes are all various different heights.
  10.  permalink

    Yeah, I missed the part about equal height. The easiest way would be to leave this one alone. Tables are just fine, if there aren't viable alternatives. On the other hand, if the contents aren't dynamic, you could just set a fixed height based on the tallest column using ems.

  11.  permalink
    Unfortunately the content is dynamic. :( (I seem to be bringing every problem possible to the table lol)

    I agree that I think a table is going to be the only solution. But coming back to a few problems I had with the table:

    1. Is there anyway I can get the stars to stick to the bottom of each td?
    2. Is there anyway of giving each td a dropshadow effect?

    Thanks again for all the replies so far.
  12.  permalink

    The easiest way to get the stars to the bottom might be to add another row of tds. A good way of testing dropshadows is to use Safari or the latest firefox beta (or some khtml compatible browser) and play with one of these:

    -webkit-box-shadow: 1px 1px 50px #333;
-moz-box-shadow: 1px 1px 50px #333;
-khtml-box-shadow: 1px 1px 50px #333;

    Then you could start figuring out how to do the same with images.

  13.  permalink
    Ok great, many thanks for your help kari! I'll give it a go.

1 to 13 of 13

  1.  
Add your comments
    Username Password
  • Format comments as (Help)
 
Back to Discussions Top of Page