Forum Moderators: not2easy
Hey guys (and gals) for some reason the box layout I'm going for isn't working. I want one big box with several small boxes inside. Think of the small boxes as being thumbnail pictures. I'm trying to make the conversion from table based to CSS. The only problem is for some reason instead of working across the top, the images are laying out diagonally. I've been wracking my brains for hours, reading through everything I could find, but no luck. I really want to make the switch to CSS, but things like this are holding me back. I could've done this in 10 second hand coding HTML. Can I not put a div inside a div? If not, is there a way to do this?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<title>Collage</title>
<style type="text/css">
body {
padding: 0px;
margin: 0px;
height: 100%;
}
div.ImgP1 {
position: absolute;
left: 200px;
top: 200px;
padding: 0px;
width: 500px;
height: 500px;
color: #8C4600;
background: #FFFFFF;
border-style: solid;
border-width: 2px;
border-color: #8C4600;
}
div.Img1 {
position: relative;
left: 10px;
top: 10px;
padding: 0px;
width: 100px;
height: 100px;
color: #8C4600;
background: #000000;
border-style: solid;
border-width: 2px;
border-color: #8C4600;
}
div.Img2 {
position: relative;
left: 120px;
top: 10px;
padding: 0px;
width: 100px;
height: 100px;
color: #8C4600;
background: #000000;
border-style: solid;
border-width: 2px;
border-color: #8C4600;
}
div.Img3 {
position: relative;
left: 230px;
top: 10px;
padding: 0px;
width: 100px;
height: 100px;
color: #8C4600;
background: #000000;
border-style: solid;
border-width: 2px;
border-color: #8C4600;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div class="ImgP1"><div class="Img1"></div><div class="Img2"></div><div class="Img3"></div></div>
</body>
</html>
