Floating Images First Pic is Wider

[mkingsle]

Hello Everyone:

Quick problem I am having that I have put off for months is this:

I have floating divs on my homepage that display the three main areas of my site, each with a picture. Common thing you see on a lot of websites, just category stuff. Anyway, when I have been doing this style, the first image in the float is wider than the others. They should all be the same size. I have tested this in firefox and IE, with both doing the same thing. Here's the code:

#middle_part {
padding-top: 8px;
position: relative;
height: 1%;
font-size: 90%;
}

#middle_part div {
width: 25%;
float: left;
background: url(/img/vertical_divider.jpg) no-repeat right top;
}

#middle_part div#middle_part_last {
background: none;
}

and the html is:

<div id="mid_section">

<div>
<a href="/videos"><img src="/img/candles.jpg" alt=""></a>

</div>

<div>
<img src="/img/candles.jpg" alt="">

</div>

<div class="last">
<a href="/belldon_homes"><img src="/img/candles.jpg" alt=""></a>

</div>


</div>

I appreciate any help I can get on this.

Thanks,

Michael

[4css]

I don't see any css for the div called mid-section. Is it possible that you gave your css one name and the div a different name?