EDIT: SOLVED
Hey everyone,
I know you probably get this a lot, and in fact, I can usually help most people when they have this problem, but now that I am trying this on my own, I cannot figure it out. I have searched all over and the suggestions I saw didnt work, maybe its the way I have my divs set up. I have a lot of divs nested, but that is the only way I can get it set the way I want.
Here is my code, Its a little sloppy only because I have been trying to fix this.
Edit: The problem I am having is with the mainleft and mainright divs. Both of those are nested in the main div.
Thanks,
Hey everyone,
I know you probably get this a lot, and in fact, I can usually help most people when they have this problem, but now that I am trying this on my own, I cannot figure it out. I have searched all over and the suggestions I saw didnt work, maybe its the way I have my divs set up. I have a lot of divs nested, but that is the only way I can get it set the way I want.
Here is my code, Its a little sloppy only because I have been trying to fix this.
Code:
<!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=iso-8859-1" />
<title>Template</title>
<style type="text/css">
#container {
width: 668px;
border: 18px solid #5A5A5A;
background-color: #E8E8E8;
}
body {
height: 100%;
}
#main{
height: 100%;
}
#mainleft {
float: left;
width: 510px;
padding-left: 8px;
padding-top: 5px;
padding-bottom: 10px;
background-color: #E8E8E8;
background-image: url('images/left_border.jpg');
background-position: left;
background-repeat: repeat-y;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #333333;
font-size: 12px;
height: 100%;
}
#mainright {
float: right;
width: 150px;
padding-top: 5px;
padding-bottom: 10px;
background-color: #E8E8E8;
background-image: url('images/right_border.jpg');
background-position: right;
background-repeat: repeat-y;
height: 100%;
}
#subheaderright img {
vertical-align: top;
}
#subheaderright {
width: 326px;
float: right;
background-color: #E8E8E8;
background-image: url('images/right_border.jpg');
background-position: right;
background-repeat: repeat-y;
}
#subheaderleft img {
vertical-align: top;
}
#subheaderleft {
width: 342px;
float: left;
background-color: #E8E8E8;
background-image: url('images/left_border.jpg');
background-position: left;
background-repeat: repeat-y;
}
#banner {
background-color: #B7DAE0;
height: 60px;
width: 468px;
vertical-align: middle;
}
img {
border: 0;
}
#footer {
width: 668px;
background-color: #C4C4C4;
margin: 0;
padding: 0;
text-align: center;
}
p {
text-indent: 7px;
}
</style>
<script language="javascript" type="text/javascript">
<!--
image1 = new Image();
image1.src = "home_omo.jpg";
image2 = new Image();
image2.src = "members_omo.jpg";
image3 = new Image();
image3.src = "join_omo.jpg";
image4 = new Image();
image4.src = "demo_omo.jpg";
image5 = new Image();
image5.src = "contact_omo.jpg";
image6 = new Image();
image6.src = "links_omo.jpg";
-->
</script>
</head>
<body>
<div id="container">
<div><img src="images/header_c.jpg" /><img src="images/header_d.jpg" /><img src="images/header_e.jpg" /></div>
<div><img src="images/spacer_a.jpg" /><a href="index.php" onmouseover="image1.src='images/home_omo.jpg'" onmouseout="image1.src='images/home.jpg'"><img src="images/home.jpg" name="image1" /></a><img src="images/spacer_b.jpg" /><a href="members.php" onmouseover="image2.src='images/members_omo.jpg'" onmouseout="image2.src='images/members.jpg'"><img src="images/members.jpg" name="image2" /></a><img src="images/spacer_c.jpg" /><a href="join.php" onmouseover="image3.src='images/join_omo.jpg'" onmouseout="image3.src='images/join.jpg'"><img src="images/join.jpg" name="image3" /></a><img src="images/subheader_a.jpg" /><img src="images/subheader_b.jpg" /><img src="images/subheader_c.jpg" /><a href="demo.php" onmouseover="image4.src='images/demo_omo.jpg'" onmouseout="image4.src='images/demo.jpg'"><img src="images/demo.jpg" name="image4" /></a><img src="images/spacer_d.jpg" /><a href="contact.php" onmouseover="image5.src='images/contact_omo.jpg'" onmouseout="image5.src='images/contact.jpg'"><img src="images/contact.jpg" name="image5" /></a><img src="images/spacer_e.jpg" /><a href="links.php" onmouseover="image6.src='images/links_omo.jpg'" onmouseout="image6.src='images/links.jpg'"><img src="images/links.jpg" name="image6" /></a><img src="images/spacer_f.jpg" /></div>
<div id="subheaderleft"><img src="images/subheader_d.jpg" /><img src="images/subheader_e.jpg" /><img src="images/subheader_f.jpg" /></div>
<div id="subheaderright"><img src="images/subheader_g.jpg" /><img src="images/subheader_h.jpg" /><img src="images/subheader_i.jpg" /></div>
<div id="main">
<div id="mainleft"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut enim justo, facilisis vitae, fermentum in, tristique vel, lacus. Nullam varius elementum quam. Nulla facilisi. Nam commodo interdum dolor. Etiam ultrices nisi vel purus. Sed est arcu, malesuada non, molestie quis, venenatis et, justo. Curabitur tincidunt eros eget velit. In orci arcu, dapibus at, tempus non, dictum ac, urna. Proin pellentesque ligula varius ipsum. Sed a neque.</p></div>
<div id="mainright">test2</div>
</div>
<div id="footer"><img src="images/footer.jpg"/></div>
</div>
</body>
</html>Edit: The problem I am having is with the mainleft and mainright divs. Both of those are nested in the main div.
Thanks,
Last edited:
