Hi
I’m quite new to CSS. I figured that if I could make an 8 by 8 grid then I should be able to position anything on any website.
I thought it would be easy but I was mistaken. I’ve managed to place 8 blocks. For some reason, I’m having trouble position the ninth block.
Maybe I’m going about it wrong. I’m trying to keep it basic by using absolute and relative positioning please.
Can anyone help me position the next nine blocks and then I should be fine; please.
Kind Regards
Matt
This is my .html :-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="" content="">
<link href="8by8gridstyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="outerbox">
<div id="innerbox">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
<div id="six"></div>
<div id="seven"></div>
<div id="eight"></div>
<div id="nine"></div>
<div id="ten"></div>
<div id="eleven"></div>
<div id="twelve"></div>
<div id="thirteen></div>"
<div id="fourteen"></div>
<div id="fifteen"></div>
<div id="sixteen"></div>
<div id="seventeen"></div>
<div id="eighteen"></div>
<div id="nineteen"></div>
<div id="twenty"></div>
<div id="twentyone"></div>
<div id="twentytwo"></div>
<div id="twentythree"></div>
<div id="twentyfour"></div>
<div id="twentyfive"></div>
<div id="twentysix"></div>
<div id="twentyseven"></div>
<div id="twentyeight"></div>
<div id="twentynine"></div>
<div id="thirty"></div>
<div id="thirtyone"></div>
<div id="thirtytwo"></div>
<div id="thirtythree"></div>
<div id="thirtyfour"></div>
<div id="thirtyfive"></div>
<div id="thirtysix"></div>
<div id="thirtyseven"></div>
<div id="thirtyeight"></div>
<div id="thirtynine"></div>
<div id="forty"></div>
<div id="fortyone"></div>
<div id="fortytwo"></div>
<div id="fortythree"></div>
<div id="fortyfour"></div>
<div id="fortyfive"></div>
<div id="fortysix"></div>
<div id="fortyseven"></div>
<div id="fortyeight"></div>
<div id="fortynine"></div>
<div id="fifty"></div>
<div id="fiftyone"></div>
<div id="fiftytwo"></div>
<div id="fiftythree"></div>
<div id="fiftyfour"></div>
<div id="fiftyfive"></div>
<div id="fiftysix"></div>
<div id="fiftyseven"></div>
<div id="fiftyeight"></div>
<div id="fiftynine"></div>
<div id="sixtyone"></div>
<div id="sixtytwo"></div>
<div id="sixtythree"></div>
<div id="sixtyfour"></div>
<div id="sixtyfive"></div>
</div> <!--end div of inner-box-->
</div> <!--end div of box-->
</body>
</html>
and this is my css so far :-
#outerbox{
width: 100%;
height: 100%;
border: 1px solid red;
padding: 2px;
margin-bottom: 2px;
position: absolute;
top:50px;
}
#one, #two, #three,#four,#five,#six,#seven,#eight{
width:10%;
height: 25px;
border: 1px solid red;
padding: 2px;
margin-bottom: 2px;
position: relative;
top:100px;
left: 10%;
}
##nine, #ten, #eleven, #twelve, #thirteen, #fourteen,#fifteen, #sixteen{
width:10%;
height: 25px;
border: 1px solid red;
padding: 2px;
margin-bottom: 2px;
top:200px;
left: 10%;
}
