ie7 multiple floating divs with percentage widths equaling 100% inside container div

This seems to works in ie8, Chrome, and Firefox. Everything should be on the same line, but in ie7 the last div for some reason doesn't seem to "fit" and gets dropped down to the next line. Is there a simple way to get this to work with ie7?

<div style="width: 95%">

    <div style="width: 25%; background-color: blue; float: left;">test1</div>

    <div style="width: 25%;  background-color: green;float: left;">test2</div>

    <div style="width: 25%;  background-color: red;float: left;">test3</div>

    <div style="width: 25%;  background-color: yellow;float: left;">test4</div>

</div>

Answers


you'll probably have to set them to 24.9%, as IE has issues with combined percentage widths of 100%.


You should just set clear:right; for all your floating div elements. It'll works fine for IE.


It's simple math!

If your <div style="width: 95%"> is generating a 100px element, each childelement of 25% will result in elements of 25px.

However, if your <div style="width: 95%"> is generating a 150px element, each childelement will be 37.5px

IE will then round this value up to 38px (because you can't have half a pixel). You will then end up with 4 elements of 38px = 152px

Hope this helps...


Need Your Help

IE8 and jquery 1.3.2 toggle

jquery internet-explorer-8

I am using this jquery function that works fine in win/mac FF 3.5 and Safari,

order grouping variable in R

r grouping

I have a database like this: