I would like to think I'm a reasonably bright person. OK, maybe a somewhat sputtery, average person. (Hush, ego....)

I thought I finally had a handle on CSS positioning, floats, clear, margin, padding, and all that.

Yet I keep running into a gotcha here, there, and oops, over there, and it's getting me frustrated. I could use some advice.

Example Web1: (HTML5, CSS3, SVG1.1)
http://www.shinyfiction.com/themes/hc01 … index.html

The article element has a horizontal margin of 5% and padding of 16px to accommodate a box-shadow and provide blank space between the text and the background-color. Within that, the aside sidebar on the left is of width: 17.5% and the section is of width: 75.00%. Both elements float left and have margin: 8px and padding: 16px, with the intention providing blank space again. Specifically, I typically don't want the blocks to be right next to each other without a gutter separating them, especially for this design.

All well and good, right? There's 7.5% space between the blocks, which ought to more than account for the margins and padding. As nearly as I can tell, padding seems to *add* to the box width, instead of being an inset within it, but of that, I'm not sure. In any case, past some point, such as on an iPad or window size smaller than about 1024px, the section box bumps down past the bottom of the aside. Float left and float right both do this.

But I want the two blocks always at the same level, and I don't understand what I'm missing in my knowledge, that I keep tripping over things like this. If the percentages are always less than 100%, whatever amount that margin and padding add, why do the blocks float down instead of remaining on the same level in a proportional layout?

Yes, there are times I want elements within a section, say, to float down as needed.

I'm obviously missing something, and it's aggravating. I'd appreciate advice. Thanks in advance.

This is where math comes in... You have 16px padding and 32px margins. Because 8px * 2 =16px and 16px* 2 = 32px (You have to count both boxes because both have a padding and margin.) I do not know how to calculate that into a %. I would suggest adding your padding to just your sections. Not to every element and floating your section left instead of right.

Did you mean you suggest I add margins to just the section? Because if I omit the padding, then the text will overlap the shadows on the boxes. Even without those box-shadows, it's generally desirable to have some breathing room between the text and its containing block, if the block has a different background color.

The fixed value in px is intended just to account for the border shadows and a standard margin.

An option could be to change those to em instead of px, which would be a scalar value without being quite so drastic as percentage, which would tend to grow/shrink too rapidly based on window size, I'd think. However, even with em values, how to relate those to the percentages to arrive at a total width, I'm not sure of. I suppose I'd have to multiply the default font-size (medium, presumably 12pt) times the em values, then add these to the percentages to arrive at a cumulative width?

However, I have a reduced case that *still* exhibits the problem I'm talking about.

Suppose you have an article containing an aside and a section. The article has a margin in percent. The aside and section have margin 0 and padding 0, with widths that together total width < 100%, by about 5%, say, for a fudge factor / breathing room. Let's say, aside width: 20%; section width: 75%; Yet this will *still* float down. What gives? I don't understand.

Visually, it's desirable that the aside and section line up such that any header || footer align without gaps left-most and right-most.

I am suggesting you break this apart...



And give padding to the fields that you want padding in. Right now, you are adding padding to the aside and section selectors.

And that you change this section code to float: left;

You also have to take into account the 1px border around everything... Just noticed it.

Thanks, Sirage.

Welcome.