Sudoku grid

I want to make a sudoku grid in css. I have tried this but it does not work.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html lang=“Eng” xmlns=“http://www.w3.org/1999/xhtml”>

<head>
<style type=‘text/css’>
#colleft{width:260px; height:260px;float:left; no-repeat top left;border-color: #000000 black black;border-style: solid; }
#box{width:28px;height:28; border-color: #000000 black black;border-style: solid; }
</style>
</head>

<body>
<div id=“colleft” class=“colleft”>
<div class=“box”>7</div>
<div class=“box”>4</div>
<div class=“box”>3</div>
<div class=“box”>2</div>
<div class=“box”>1</div>
<div class=“box”>8</div>
<div class=“box”>5</div>
<div class=“box”>9</div>
<div class=“box”>6</div>
<br>

<div class=“box”>2</div>
<div class=“box”>1</div>
<div class=“box”>8</div>
<div class=“box”>5</div>
<div class=“box”>9</div>
<div class=“box”>6</div>
<div class=“box”>7</div>
<div class=“box”>4</div>
<div class=“box”>3</div>
<br>

<div class=“box”>5</div>
<div class=“box”>8</div>
<div class=“box”>7</div>
<div class=“box”>9</div>
<div class=“box”>6</div>
<div class=“box”>2</div>
<div class=“box”>1</div>
<div class=“box”>4</div>
<div class=“box”>3</div>
<br>

<div class=“box”>7</div>
<div class=“box”>4</div>
<div class=“box”>3</div>
<div class=“box”>2</div>
<div class=“box”>1</div>
<div class=“box”>8</div>
<div class=“box”>5</div>
<div class=“box”>9</div>
<div class=“box”>6</div>
<br>

<div class=“box”>2</div>
<div class=“box”>1</div>
<div class=“box”>8</div>
<div class=“box”>5</div>
<div class=“box”>9</div>
<div class=“box”>6</div>
<div class=“box”>7</div>
<div class=“box”>4</div>
<div class=“box”>3</div>
<br>

<div class=“box”>5</div>
<div class=“box”>8</div>
<div class=“box”>7</div>
<div class=“box”>9</div>
<div class=“box”>6</div>
<div class=“box”>2</div>
<div class=“box”>1</div>
<div class=“box”>4</div>
<div class=“box”>3</div>
<br>

<div class=“box”>7</div>
<div class=“box”>4</div>
<div class=“box”>3</div>
<div class=“box”>2</div>
<div class=“box”>1</div>
<div class=“box”>8</div>
<div class=“box”>5</div>
<div class=“box”>9</div>
<div class=“box”>6</div>
<br>

<div class=“box”>2</div>
<div class=“box”>1</div>
<div class=“box”>8</div>
<div class=“box”>5</div>
<div class=“box”>9</div>
<div class=“box”>6</div>
<div class=“box”>7</div>
<div class=“box”>4</div>
<div class=“box”>3</div>
<br>

<div class=“box”>5</div>
<div class=“box”>8</div>
<div class=“box”>7</div>
<div class=“box”>9</div>
<div class=“box”>6</div>
<div class=“box”>2</div>
<div class=“box”>1</div>
<div class=“box”>4</div>
<div class=“box”>3</div>
<br>

</div>
</body></html>

This webpage contains the type of layout that I want - this is in tables though

http://www.e-sudoku.fr/en/impression.php

I would really advice against using px sizes. howver this might do:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="Eng" xmlns="http://www.w3.org/1999/xhtml">

<head>
<style type='text/css'>
#colleft{width:279px; height:279px;float:left;  border:3px  #000 solid;  }
.box{width:31px;height:31px; float:left ;text-align: center; vertical-align: middle; position: relative}
.box+.box{width:30px;  border-left: #000 1px solid; float:left;}
.newline + div.box{  border-left: none;width:31px  }
.newline ~ div {  border-top: 1px solid #000; height:30px}
.box:after {content:""; vertical-align: middle; height:100%; display: inline-block;}
</style>
</head>

<body>
<div id="colleft" >
<div class="box">7</div>
<div class="box">4</div>
<div class="box">3</div>
<div class="box">2</div>
<div class="box">1</div>
<div class="box">8</div>
<div class="box">5</div>
<div class="box">9</div>
<div class="box newline">6</div>

<div class="box">2</div>
<div class="box">1</div>
<div class="box">8</div>
<div class="box">5</div>
<div class="box">9</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">4</div>
<div class="box newline">3</div>

<div class="box">5</div>
<div class="box">8</div>
<div class="box">7</div>
<div class="box">9</div>
<div class="box">6</div>
<div class="box">2</div>
<div class="box">1</div>
<div class="box">4</div>
<div class="box newline">3</div>

<div class="box">7</div>
<div class="box">4</div>
<div class="box">3</div>
<div class="box">2</div>
<div class="box">1</div>
<div class="box">8</div>
<div class="box">5</div>
<div class="box">9</div>
<div class="box newline">6</div>

<div class="box">2</div>
<div class="box">1</div>
<div class="box">8</div>
<div class="box">5</div>
<div class="box">9</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">4</div>
<div class="box newline">3</div>

<div class="box">5</div>
<div class="box">8</div>
<div class="box">7</div>
<div class="box">9</div>
<div class="box">6</div>
<div class="box">2</div>
<div class="box">1</div>
<div class="box">4</div>
<div class="box newline">3</div>


<div class="box">7</div>
<div class="box">4</div>
<div class="box">3</div>
<div class="box">2</div>
<div class="box">1</div>
<div class="box">8</div>
<div class="box">5</div>
<div class="box">9</div>
<div class="box newline">6</div>

<div class="box">2</div>
<div class="box">1</div>
<div class="box">8</div>
<div class="box">5</div>
<div class="box">9</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">4</div>
<div class="box newline">3</div>

<div class="box">5</div>
<div class="box">8</div>
<div class="box">7</div>
<div class="box">9</div>
<div class="box">6</div>
<div class="box">2</div>
<div class="box">1</div>
<div class="box">4</div>
<div class="box newline">3</div>

</div>
</body></html> 

Alternatively: you could also wrap a DIV arown each row and use the display:table/table-row/table-cell property. Same amount of mark up is involved as using tables, so the question is… it this, semantically, what you are representing?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="Eng" xmlns="http://www.w3.org/1999/xhtml">

<head>
<style type='text/css'>
#colleft{width:279px; height:279px;float:left;  display:table; border-collapse:collapse; border:3px solid #000}
.box{display:table-cell; text-align: center; vertical-align: middle; border: 1px solid #000}
.row {display:table-row; width:100%; background: red}
</style>
</head>

<body>
<div id="colleft" >
<div class="row">
<div class="box">7</div>
<div class="box">4</div>
<div class="box">3</div>
<div class="box">2</div>
<div class="box">1</div>
<div class="box">8</div>
<div class="box">5</div>
<div class="box">9</div>
<div class="box ">6</div>

<!--row--></div>
<div class="row">
<div class="box">2</div>
<div class="box">1</div>
<div class="box">8</div>
<div class="box">5</div>
<div class="box">9</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">4</div>
<div class="box ">3</div>

<!--row--></div>
<div class="row">
<div class="box">5</div>
<div class="box">8</div>
<div class="box">7</div>
<div class="box">9</div>
<div class="box">6</div>
<div class="box">2</div>
<div class="box">1</div>
<div class="box">4</div>
<div class="box ">3</div>

<!--row--></div>
<div class="row">
<div class="box">7</div>
<div class="box">4</div>
<div class="box">3</div>
<div class="box">2</div>
<div class="box">1</div>
<div class="box">8</div>
<div class="box">5</div>
<div class="box">9</div>
<div class="box ">6</div>

<!--row--></div>
<div class="row">
<div class="box">2</div>
<div class="box">1</div>
<div class="box">8</div>
<div class="box">5</div>
<div class="box">9</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">4</div>
<div class="box ">3</div>

<!--row--></div>
<div class="row">
<div class="box">5</div>
<div class="box">8</div>
<div class="box">7</div>
<div class="box">9</div>
<div class="box">6</div>
<div class="box">2</div>
<div class="box">1</div>
<div class="box">4</div>
<div class="box ">3</div>

<!--row--></div>

<div class="row">
<div class="box">7</div>
<div class="box">4</div>
<div class="box">3</div>
<div class="box">2</div>
<div class="box">1</div>
<div class="box">8</div>
<div class="box">5</div>
<div class="box">9</div>
<div class="box ">6</div>

<!--row--></div>
<div class="row">
<div class="box">2</div>
<div class="box">1</div>
<div class="box">8</div>
<div class="box">5</div>
<div class="box">9</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">4</div>
<div class="box ">3</div>

<!--row--></div>
<div class="row">
<div class="box">5</div>
<div class="box">8</div>
<div class="box">7</div>
<div class="box">9</div>
<div class="box">6</div>
<div class="box">2</div>
<div class="box">1</div>
<div class="box">4</div>
<div class="box ">3</div>

<!--row--></div>
</div>
</body></html> 

hope that helps

Not to be pedantic, but why not just use tables for this purpose? It’s a perfectly valid use of a table, since you’re creating a grid of numbers.

But if you’re determined to do it this way, then there’s an easier way to style this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="Eng" xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type='text/css'>
div { margin: 0; border: 1px solid black; float:left; }
div div { width: 28px; height: 28px; text-align: center;  padding: .25em 0}
.other { background-color: grey; }
.clear { clear: both; } 
</style>
</head>
<body>
<div>
 <div>7</div>
 <div>4</div>
 <div>3</div>
 <div class="clear">2</div>
 <div>1</div>
 <div>8</div>
 <div class="clear">5</div>
 <div>9</div>
 <div>6</div>
</div>
<div class="other">
 <div>2</div>
 <div>1</div>
 <div>8</div>
 <div class="clear">5</div>
 <div>9</div>
 <div>6</div>
 <div class="clear">7</div>
 <div>4</div>
 <div>3</div>
</div>
<div>
 <div>5</div>
 <div>8</div>
 <div>7</div>
 <div class="clear">9</div>
 <div>6</div>
 <div>2</div>
 <div class="clear">1</div>
 <div>4</div>
 <div>3</div>
</div>
<div class="other clear">
 <div>7</div>
 <div>4</div>
 <div>3</div>
 <div class="clear">2</div>
 <div>1</div>
 <div>8</div>
 <div class="clear">5</div>
 <div>9</div>
 <div>6</div>
</div>
<div>
 <div>2</div>
 <div>1</div>
 <div>8</div>
 <div class="clear">5</div>
 <div>9</div>
 <div>6</div>
 <div class="clear">7</div>
 <div>4</div>
 <div>3</div>
</div>
<div class="other">
 <div>5</div>
 <div>8</div>
 <div>7</div>
 <div class="clear">9</div>
 <div>6</div>
 <div>2</div>
 <div class="clear">1</div>
 <div>4</div>
 <div>3</div>
</div>
<div class="clear">
 <div>7</div>
 <div>4</div>
 <div>3</div>
 <div class="clear">2</div>
 <div>1</div>
 <div>8</div>
 <div class="clear">5</div>
 <div>9</div>
 <div>6</div>
</div>
<div class="other">
 <div>2</div>
 <div>1</div>
 <div>8</div>
 <div class="clear">5</div>
 <div>9</div>
 <div>6</div>
 <div class="clear">7</div>
 <div>4</div>
 <div>3</div>
</div>
<div>
 <div>5</div>
 <div>8</div>
 <div>7</div>
 <div class="clear">9</div>
 <div>6</div>
 <div>2</div>
 <div class="clear">1</div>
 <div>4</div>
 <div>3</div>
</div>
<br class="clear" />
</body>
</html> 

Off Topic:

I just contracted a case of divitis.

Thanks Dave Maxwell and dresden_phoenix. Thats given me just what I need