PDA

View Full Version : positioning boxes within boxes using HTML and CSS



uknowmeitsmattp
Jan 15th, 2009, 08:57 PM
I'm trying to achieve a certain layout and can't seem to get the basic setup down. Here is what I want:

7036

The big box that contains the smaller ones is not the whole page, that is its own div within the page (I left out the header above it and the nav bar to the left of it). So the big box is a div, and then will have 9 small boxes that contain text and images within it positioned as in the picture. I've been looking for a way to do this but haven't been able to find it. What's the basic HTML and CSS code going to look like to achieve this?

jerry62704
Jan 15th, 2009, 09:27 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Job Tracker</title>
<style type="text/css">
body {
margin:0;
padding:0;
width:100%;
color: #000;
font-size: 1em;
}
.floatLeft {float:left;
margin-left: 10px;}
.clearAll {clear:both;}
</style>
</head>

<body>

<div id="yourBigBox">
<div class="floatLeft">xxx</div>
<div class="floatLeft">yyy</div>
<div class="floatLeft">zzz</div>
<div class="clearAll"></div>
<div class="floatLeft">xxx</div>
<div class="floatLeft">yyy</div>
<div class="floatLeft">zzz</div>
</div>
</body>
</html>

uknowmeitsmattp
Jan 15th, 2009, 09:50 PM
That did it, the clear:both screwed it up but I removed that and am using padding to do the rest. Thanks!