Problem:

Suppose I have something like the following code:

<section> <!-- could also be div -->
<h1>Heading</h1>
<!-- paragraphs, etc. -->

<section class="column" id="columnLeft">
<!-- tags content -->
</section>
<section class="column" id="columnMiddle">
<!-- tags content -->
</section>
<section class="column" id="columnRight">
<!-- tags content -->
</section>

<!-- potentially more content -->
</section> <!-- outer -->

Now the CSS for the columns looks like:

.column {
display: block; /* or inline-block; */
float: left;
margin: 0.5em 1.00%;
padding: 0 0;
width: 30.00%;
}

Now, if I add the widths and margins and padding together, I get 3 * 30.00% + 6 * 1.00% + 6 * 0.00% = 96.00%. This is a little less than 100.00%, obviously.

The problem is, not all browsers are putting all three columns on the same horizontal level. Some, such as iOS / Safari Mobile, are floating the right-most column to the next position below.

I've also tried this with padding instead of margin.

I've tried smaller widths, such as 25.00%, so the total is below 90.00%, but this doesn't help either.

Yet oddly, doing essentially the same with a block and tags within the column does appear to work in the same browser. ...But presumably not all browsers.

What am I doing wrong and how do I fix it? There is *still* something I don't understand about using floats, positioning, etc., and I keep running into this. Sometimes, your design needs margin, sometimes padding, along with whatever visual presentation (background color, borders, etc.). But this is so aggravatingly mystifying, I often fall back to...tables, for layout.

Example Files:
http://www.shinyfiction.com/stories/index.html
http://www.shinyfiction.com/styles/blue … -index.css
The file below is used also, but shouldn't be affecting this.
http://www.shinyfiction.com/styles/blue-04.css

Thanks in advance for any help.

Different browsers use different default values for margins, paddings, etc. and they are not necessarily zero. If you Google (e.g.) "CSS reset", you'll find various suggestions for resetting the values to zero from the outset.
One useful site is this one:
http://meyerweb.com/eric/tools/css/reset/