Width percentages and spaces when floating left

[DJRobThaMan]

Hi,

I wasn't sure whether to put this in the HTML forum or this one but I'm pretty sure the problem I'm having is CSS related.

I have a series of divs set to display within a larger div. This is actually a progress bar to show your position in an album of images and the number of divs with a background colour that is displayed depends on where you are in the album (all php outputted).

I'm having a bit of a problem with it though. When you add up the percentage values I have for all the divs, they sum to 100, but the smaller divs do not span all of the larger div.

Also, (in IE this is a non-issue... for once I'm not pulling my hair out because IE is my major problem... feels kinda strange) there is a space (i think it's about 1 pixel wide between the 2nd and 3rd divs and the 4th and 5th div.
(In this case there are 7 divs but this is all variable depending on how many images there are in the album. This album I'm currently working with only has 7 images in it)

Here is a snippet of the code for the progress bar (also includes the left and right arrows)


<div style=" width: 409px; margin: auto; margin-top: 5px;">
<div style="float: left; width: 30px;">
<a href="?section=stills&album=1&image=6"><img alt="" title="View the previous image" src="../images/arrowLeft.jpg"></a>
</div>
<div title=" (7out of7)" style="float: left; width: 339px; height: 4px; margin-left: 5px; margin-top: 8px; border: 1px solid #999999;">
<div style="float: left; height: 100%; width: 14%; background-color: #999999;">

<div class="space"></div>
</div>
<div style="float: left; height: 100%; width: 14%; background-color: #999999;">
<div class="space"></div>
</div>
<div style="float: left; height: 100%; width: 14%; background-color: #999999;">
<div class="space"></div>
</div>
<div style="float: left; height: 100%; width: 14%; background-color: #999999;">

<div class="space"></div>
</div>
<div style="float: left; height: 100%; width: 14%; background-color: #999999;">
<div class="space"></div>
</div>
<div style="float: left; height: 100%; width: 14%; background-color: #999999;">
<div class="space"></div>
</div>
<div style="float: left; height: 100%; width: 16%; background-color: #999999;">

<div class="space"></div>
</div>
</div>
<div style="float: right; width: 30px;">
<a href="?section=stills&album=1&image=7"><img alt="" title="View the next image" src="../images/arrowRight.jpg"></a>
</div>
</div>


and below is the code in context.

Thanks a lot,
Douglas

[DJRobThaMan]

hmmm... got the php calculating pixel values now and the spaces are gone in firefox, but in both IE and firefox, if i set up the calculation so that the pixel value of the last div should fit snugly in the larger div (ie. sum of widths of first 6 small divs + width fo 7th small div = width of larger div) then the larger div increases its height and the last 2 divs get wrapped to the next line (is it just me or is it strange that the last 2 divs are being sent to the next line as opposed to just the last one?).

But I can have them all on one line if I make the last div smaller.. but again I have the problem of the end of the last small div not synching up with the end of the larger div so that there is a space at the end of the progress bar... so the 100% position is not quite at the 100% if you get what I'm saying.

Any thoughts on this one?

Douglas

[DJRobThaMan]

It seems I didn't quite refresh it in firefox before that last post.

So, the situation is everything is fine for firefox, but the problem remains for IE (the last 2 small divs are being wrapped).

What do you think?

Douglas

[Mr J]

I have a question,

14% of 339 = 47.46

As browsers work in whole pixels does the browser make it 47 or 48

[DJRobThaMan]

Yeah... I know it's not an integer value. But I'm using the intval() function in php to force it to be an integer. The value becomes 48 for the first 6 divs, then I manipulate the equation a little bit and the last div has a width of 51.

Douglas

ps. here is the new output using pixel values