Hi, I hope someone can help me with this. I'm trying to move from tables to
boxes, and my first project involves creating a grid of 9 boxes in a 3x3
arrangement, like this:
xx xx xx
xx xx xx
xx xx xx
xx xx xx
xx xx xx
xx xx xx
I solved it in the end by nailing down every column's position on the screen
with position:absolu te, but that seems pretty undesirable to me - I want to
nail the boxes to 250x250 pixels, but I would rather use margin to seperate
them, and find a way to centre them on the page.
I would be grateful if anyone could suggest a better approach. Code
attached.
<html>
<head><style type="text/css">
body {
background-color: #000000;
border:0px;
margin:0px;
font-family: Verdana, sans-serif;
font-size:14px;
font-weight:normal;
}
#col1 {
width: 250px;
position: absolute;
left: 0px;
top: 0px;
}
#col2 {
width: 250px;
position: absolute;
left: 260px;
top: 0px;
}
#col3 {
width: 250px;
position: absolute;
left: 520px;
top: 0px;
}
#outerbox {
background-color:#ffffff;
color: #000000;
width: 250px;
height: 250px;
background-image: url("images/boxbottom.png") ;
background-repeat: no-repeat;
background-position: bottom left;
margin: 10px;
}
#innerbox {
background-image: url("images/boxtop.png");
background-repeat: no-repeat;
background-position: top right;
margin: 0px;
}
</style></head>
<body>
<div id="col1">
<div id="outerbox">< div id="innerbox">1 </div></div>
<div id="outerbox">< div id="innerbox">2 </div></div>
<div id="outerbox">< div id="innerbox">3 </div></div>
</div>
<div id="col2">
<div id="outerbox">< div id="innerbox">4 </div></div>
<div id="outerbox">< div id="innerbox">5 </div></div>
<div id="outerbox">< div id="innerbox">6 </div></div>
</div>
<div id="col3">
<div id="outerbox">< div id="innerbox">7 </div></div>
<div id="outerbox">< div id="innerbox">8 </div></div>
<div id="outerbox">< div id="innerbox">9 </div></div>
</div>
</body>
</html>
boxes, and my first project involves creating a grid of 9 boxes in a 3x3
arrangement, like this:
xx xx xx
xx xx xx
xx xx xx
xx xx xx
xx xx xx
xx xx xx
I solved it in the end by nailing down every column's position on the screen
with position:absolu te, but that seems pretty undesirable to me - I want to
nail the boxes to 250x250 pixels, but I would rather use margin to seperate
them, and find a way to centre them on the page.
I would be grateful if anyone could suggest a better approach. Code
attached.
<html>
<head><style type="text/css">
body {
background-color: #000000;
border:0px;
margin:0px;
font-family: Verdana, sans-serif;
font-size:14px;
font-weight:normal;
}
#col1 {
width: 250px;
position: absolute;
left: 0px;
top: 0px;
}
#col2 {
width: 250px;
position: absolute;
left: 260px;
top: 0px;
}
#col3 {
width: 250px;
position: absolute;
left: 520px;
top: 0px;
}
#outerbox {
background-color:#ffffff;
color: #000000;
width: 250px;
height: 250px;
background-image: url("images/boxbottom.png") ;
background-repeat: no-repeat;
background-position: bottom left;
margin: 10px;
}
#innerbox {
background-image: url("images/boxtop.png");
background-repeat: no-repeat;
background-position: top right;
margin: 0px;
}
</style></head>
<body>
<div id="col1">
<div id="outerbox">< div id="innerbox">1 </div></div>
<div id="outerbox">< div id="innerbox">2 </div></div>
<div id="outerbox">< div id="innerbox">3 </div></div>
</div>
<div id="col2">
<div id="outerbox">< div id="innerbox">4 </div></div>
<div id="outerbox">< div id="innerbox">5 </div></div>
<div id="outerbox">< div id="innerbox">6 </div></div>
</div>
<div id="col3">
<div id="outerbox">< div id="innerbox">7 </div></div>
<div id="outerbox">< div id="innerbox">8 </div></div>
<div id="outerbox">< div id="innerbox">9 </div></div>
</div>
</body>
</html>
Comment