PDA

View Full Version : Middle column in playing up in firefox


nicolec
06-28-2007, 11:50 AM
I am creating a site with 3 columns, I've done this using a left and a right float. I've nested 2 divs into each column (one for the heading text and one for the body text). The 2 outside columns are working fine, but the middle one is not wokring correctly when I preview it in Firefox (is fine in IE6). I need the text to be slightly away from the edges of the columns, so I added left and right padding. Then I tried left and right margin. They both look correct in IE, but Firefox doesn't seem to be taking any notice of these and so the text is running all the way from one edge to the other. I'm not sure what else to try..... It's driving me mad!!

Here is my code: (smallbox2 is the middle column)

<div id="smallbox1">
<div id="smallbox1_header">HEADER 1</div>
<div id="smallbox1_body">
<p>Ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, ut enim ad minim veniam, excepteur sint occaecat. </p>
</div>
</div>
<div id="smallbox3">
<div id="smallbox3_header">HEADER 3</div>
<div id="smallbox3_body">
<p>Consectetur adipisicing elit, in reprehenderit in voluptate ut aliquip ex ea commodo consequat. Quis nostrud exercitation duis aute irure dolor velit esse cillum dolore.</p>
</div>
</div>
<div id="smallbox2">
<div id="smallbox2_header">HEADER 2</div>
<div id="smallbox2_body">
<p>In reprehenderit in voluptate velit esse cillum dolore duis aute irure dolor. Cupidatat non proident, ut enim ad minim veniam, ullamco laboris nisi. </p>
</div>

And here are the rules:

}
#smallbox1 {
background: url(images/box_bg.gif) no-repeat right center;
float: left;
height: 280px;
width: 272px;
margin-left: 0px;
}
#smallbox1_header {
font-size: 100%;
font-weight: bold;
color: #000000;
padding-top: 43px;
padding-left: 91px;
text-align: center;
padding-right: 2px;
}
#smallbox1_body {
color: #000000;
padding-left: 95px;
padding-right: 6px;
}
#smallbox3_header {
font-size: 100%;
font-weight: bold;
color: #000000;
padding-top: 43px;
padding-right: 91px;
text-align: center;
padding-left: 2px;
}
#smallbox3_body {
color: #000000;
padding-right: 95px;
padding-left: 6px;
}
#smallbox3 {
background: url(images/box_bg.gif) no-repeat left center;
float: right;
height: 280px;
width: 272px;
margin-right: 0px;
}
#smallbox2 {
background: url(images/box_bg.gif) no-repeat center center;
height: 280px;
}
#smallbox2_header {
font-size: 100%;
font-weight: bold;
color: #000000;
padding-top: 43px;
text-align: center;
padding-right: 25px;
padding-left: 25px;#smallbox2 {
background: url(images/box_bg.gif) no-repeat center center;
height: 280px;
}
#smallbox2_body {
margin-right: 20px;
margin-left: 20px;
}

If anyone knows where I am going wrong it would be greatly appreciated!!
:lol:

Cary
06-30-2007, 04:47 AM
You could add margins to the center column like this:

#smallbox2 {
background: url(images/box_bg.gif) no-repeat center center;
height: 280px;
margin-left: 275px;
margin-right: 275px;
}
But notice you've included a second #smallbox2 selector and its rules within your style rules for #smallbox2_header.