Boxes in CSS?

Get Started
1

I am looking for a better way to create 4 (50px x 50px) boxes across and 6 boxes down with 10px gap between each boxes Each box will have a link. I am new to web design. I am aware that you can create each box with div, but it takes up a bit of time doing it. Please advise me if there a quicker or better way.

2

How are you doing it now?

3

I am doing it by div, just done the first 6 boxes.

4

Will the content ever grow longer (not wider) than 50px?

5

No, the boxes will always be 50x50px however the max will be 4 boxes across and 7 down. so in one big block it 230 px wide by 410 px deep including 10px between each boxes it will will not be any wider or deeper than this.

6

Sounds like a job for a table (no stones, please!). We try not to use them for layout purposes, as they require more markup than is usually needed. But sometimes, a table just makes good sense.

Table markup looks like this:


<table>
  <tr>
    <td>box 1, row 1</td>
    <td>box 2, row 1</td>
    <td>box 3, row 1</td>
    <td>box 4, row 1</td>
  </tr>
  <tr>
    <td>box 1, row 2</td>
    <td>box 2, row 2</td>
    <td>box 3, row 2</td>
    <td>box 4, row 2</td>
  </tr>
</table>

and so on (this only shows 2 rows). For some tips on styling the CSS you should check out a video by the amazing Chris Coyier about styling tables with CSS.

If you’d like to do the same in CSS and <div> elements, you’re looking at something like:


#wrap {
	width: 280px
}
.cell {
	width: 50px;
	height: 50px;
	margin: 10px;
	float: left;
	background-color: #EEE;
}

And your markup would look like:


<div id="wrap">
	<div class="cell">
		cell 1, row 1
	</div>
	<div class="cell">
		cell 2, row 1
	</div>
	<div class="cell">
		cell 3, row 1
	</div>
	<div class="cell">
		cell 4, row 1
	</div>
	<div class="cell">
		cell 1, row 2
	</div>
	<div class="cell">
		cell 2, row 2
	</div>
	<div class="cell">
		cell 3, row 2
	</div>
	<div class="cell">
		cell 4, row 2
	</div>
</div>
7

Indeed. But this isn’t one of those times.

There are many acceptable ways of doing this, without resorting to tables (which isn’t acceptable). Assuming the entire box is linked, something like this will do the trick:
HTML:


<div class="container">
  <a href="">box</a>
  <a href="">box</a>
  <a href="">box</a>
  <a href="">box</a>
  <a href="">box</a>
  <a href="">box</a>
  <a href="">box</a>
  <a href="">box</a>
(snip)
</div>

CSS:


.container {
width: 240px;
}

.container a {
background-color: #ccc;
float: left;
height: 50px;
margin: 5px;
width: 50px;
}

(untested - you might need to make container a display: block and float: left instead to work properly)

Edit: I did make one or two schoolboy errors - tested and fixed. Although the code above that ggeiger provided looks similar, it’s not valid and it’s less elegant)

8

Thanks for your kind reply guys I did not realized that there are a number of ways of doing it. It making me think :slight_smile: