rexolioISback
Programmer
I'm having problems getting the layout that I want to work in Firefox. I'm sure I'm missing something or am simply laying it out wrong to begin with. Here is what I'm trying to get to:
Here is where I'm at and what it looks like in IE:
Here is what it looks like in Firefox (notice the LISTS column on the right):
Here's my code:
Here is where I'm at and what it looks like in IE:
Here is what it looks like in Firefox (notice the LISTS column on the right):
Here's my code:
Code:
<html>
<head>
<title>Home</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
HTML {
height: 100%;
}
BODY {
background-image: url('bg.gif');
background-color: #ffffff;
font-family: "Verdana", "Tahoma", "Arial", "Helvetica", sans-serif;
font-size: xx-small;
color: #000;
line-height: 13px;
height: 100%
}
#wrapper {
width: 975px;
margin: 0 auto;
}
#cwrapper {
width: 973px;
height: 100%;
margin: 0 auto;
border-left: 1px solid gray;
border-right: 1px solid gray;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
border-collapse: collapse;
background-color: #fff;
overflow: hidden;
}
#mainbox {
background: #AA112D;
width: 542px;
height: 244px;
float:left;
background-color:#AA112D
}
#promobox {
width: 431px;
height: 122px;
background-color: #FCFAC1;
float: right;
margin: 0px;
}
#subpromobox {
width: 295px;
height: 122px;
background-color: #E16D80;
float: left;
}
#listsbox {
width: 136px;
height: 652px;
background-color: #832B39;
float: left;
}
#listsbox p {
margin: 0px 0px 0px 6px;
}
#subfeatures {
width: 837px;
height: 100%;
clear: left;
float: left;
}
#subsection1 {
width: 255px;
height: 151px;
float: left;
}
#subdivVert1a {
width: 1px;
height: 151px;
float: left;
background-image: url(divider.gif);
background-repeat: repeat-y;
}
#subsection2 {
width: 286px;
height: 151px;
float: left;
}
#subdivVert1b {
width: 1px;
height: 151px;
float: left;
background-image: url(divider.gif);
background-repeat: repeat-y;
}
#subdivHoriz1 {
width: 542px;
height: 1px;
clear: left;
float: left;
background-image: url(divider.gif);
background-repeat: repeat-x;
}
#subsection3 {
width: 294px;
height: 299px;
float: left;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="contentwrapper">
<div id="mainbox">Main</div>
<div id="promobox">Promo</div>
<div id="subpromobox">SubPromo</div>
<div id="subfeatures">
<div id="subsection1">Section 1</div>
<div id="subdivVert1a"></div>
<div id="subsection2">Section 2</div>
<div id="subdivVert1b"></div>
<div id="subdivHoriz1"></div>
<div id="subsection3">Section 3</div>
</div>
<div id="listsbox"><p>List</p></div>
</div>
</div>
</body>
</html>