Forum Moderators: not2easy

Message Too Old, No Replies

wrapper and col won't hold boundries in Firefox

         

Steverino

2:33 pm on Jan 25, 2007 (gmt 0)

10+ Year Member



Fairly new to .css...I have coded a wrapper and then within the wrapper, I have four rows: a masthead row, a container row, a container2 row and a footer row.

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;
}
------------------------------------------------------

mep00

4:25 pm on Jan 25, 2007 (gmt 0)

10+ Year Member



It would be helpful is you also included the nesting structure of your divs, rather than just a verbal description. None the less, it looks like the three divs are too wide to fit in their container. Try eliminating the padding:

* {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.