ansaurus

Question

CSS - What's the best way of creating a 9x9 Sudoku grid?

Answer 1

+5 A:

If it's tabular data, you can use a table. If you want to stick with DIV's, you can do that easily by setting specific width/height values for each parent cube, and the child cubs, and simply floating them left/right. Just be sure to use the clear fix to keep the content from flowing past their sibling tags if you decide NOT to use explicit width/height values.

#sudoku {
  width:297px;
  height:297px;
}
  .parentCube {
    width:99px;
    height:99px;
    float:left;
  }
    .childCube {
      width:33px;
      height:33px;
      float:left;
    }

<div id="sudoku">
  <div class="parentCube">
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
  </div>
  <div class="parentCube">
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
  </div>
  <div class="parentCube">
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
  </div>
</div>

Jonathan Sampson 2009-06-14 19:48:12

Thanks for that, but what's the clear fix?

GenericTypeTea 2009-06-14 19:55:16

Sorry, if you use an explicit height on the parent containers, you won't need to use the "clear fix." But just for personal gain, the clear fix is nothing more than adding a DIV beneath elements that are floated. That new div would have "clear:both" to make sure the floated elements don't overlap whatever they precede.

Jonathan Sampson 2009-06-14 19:56:42

+1 for use a table. This is tabular data.

Joel Coehoorn 2009-06-14 20:07:25

Brilliant, thanks Jon!

GenericTypeTea 2009-06-14 20:08:13

I am sorry, I need do downvite it. Suduko is a table, a grid of 3x3. Emulating it using CSS is just a pain. IMHO this is simper to achieve using tables.

elcuco 2009-06-14 20:16:40

Good point. However generally speaking "pain" and "easiness" should not influence the decision to use or don't use tables, it's all about the context and yes I think you have a valid case there for using tables..

merkuro 2009-06-16 01:16:31

The "childCube" class is redundant, you can target that div using '.parentCube div'

roryf 2009-06-17 14:54:44

@Rory Yes, it is. But I don't know what will be within those cildCubes. Perhaps they will decide to use additional divs...I am not sure. This way, I don't match every single div down the tree.

Jonathan Sampson 2009-06-17 18:29:44

Answer 2

+3 A:

Wow Jonathan Sampson was FAST and deserves the credit! Here is my approach:

 <?xml version='1.0' encoding='UTF-8'?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;   
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">     
        <head>  
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
         <title>Sudoku</title>

        <style type="text/css">
          #playfield{
            width:920px;
            height:920px;
          }
          #playfield div{
            width:300px;
            height:300px;
            float:left;
            border:1px solid #ff8a00;
          }
          #playfield span{
            font-size:300%;
            width:98px;
            height:98px;
            float:left; 
            display:block;
            border:1px solid white;
            text-align:center;  
            line-height:99px;
            background-color:#f2f2f2;      
          }
          #playfield span:hover{
            background-color:#0d2f5a;
            color:white; 
          }
        </style>       
        </head>

        <body>
          <div id="playfield">
            <div>
            <span id="position_1">1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
            <span>7</span>
            <span>8</span>
            <span>9</span>
            </div>
            <div>
              <span>...</span>
            </div>
          </div>
        </body>
    </html>

merkuro 2009-06-14 20:00:21

Thanks for that, it's always good to see multiple solutions! I think I prefer this one as its much cleaner, but like you said, Jon was faster.

GenericTypeTea 2009-06-14 20:05:42

In my opinion you should mark this answer as accepted, when you prefer it. Accepting is not bound to the fastest answer.

tanascius 2009-06-14 20:29:21

ansaurus

tags:

views:

answers:

CSS - What's the best way of creating a 9x9 Sudoku grid?

related questions