Forum Moderators: not2easy
The problem is with the container and container2 rows. The first row has three containers and the second has two.
I have 2 issues:
1. Firefox does not hold/recognize the wrappers boundries and all my containers wrap.
2. Related to the first, the second row wraps.
------------------------------------------------------
Here are my .css tags:
.#wrapper {
width: 775px;
height: auto;
margin: 0 auto;
padding: 0 0px 0px 0px;
border: 0px solid #000000;
background: #ffffff;
}
#masthead {
border: 1px solid #ffffff;
margin: 0 0 3px 0;
position: relative;
background: #FF0000;
height: 71px;
}
#leftcontainer {
float: left;
width: 240px;
margin: 0 0 4px 0;
height: 160px;
color: #FFFFFF;
background-image:url(../images/left-image-placeholder.jpg);
}
#centercontainer {
float: left;
width: 370px;
margin: 0 0 4px 6px;
height: 160px;
background: #fbeabf;
}
#rightcontainer {
float: left;
width: 153px;
margin: 0 6 4px 0px;
height: 160px;
color:#000000;
background-image:url(../images/right-grey-corner.jpg);
}
#leftcontainer2 {
float: left;
width: 240px;
margin: 0 0 4px 0;
height: 160px;
color: #FFFFFF;
background: #556688;
}
#centercontainer2 {
float: left;
width: 529px;
margin: 0 0 4px 6px;
height: 160px;
background: #E1E5EE;
}
#footercontainer {
border: 1px solid #666666;
position: relative;
margin: 0 auto;
width: 100px;
text-align: left;
}
------------------------------------------------------
* {padding : 0;} or
div {padding : 0;} I always include: "
* {margin : 0; padding : 0;}" in order to start with a clean slate across all browsers and add back any margins or padding, where needed.