Floating elements with% based width and px based borders. What is the best way to avoid line breaks?

Question

I have a problem that scares me in my sleep, inexorably. If you have an acceptable solution and you can share it, do it; I would like to sleep again.

In my last project there are several times when I will need to have 4 or 5 elements located next to each other. Each element must be sized using percentages (%), but must also have border-right: 1px solid #000 .

Once I used to compose each element with percentages, and then create a child element that would have all the style properties that the parent probably should have, including border-right . However, this solution is not ideal because it involves a lot of unnecessary markup.

Then a colleague directed me to another solution. When an element has a width that is equal to% s and must also have border-right: 1px solid #000 , apply margin-right: -1px as the offset. And although it works, it created another problem for me (which is why we are here, together, in alliance).

When scaling in any of the main browsers (ctrl mousescroll, ctrl -), floating elements that were the subject of discussion usually dance a little; the last item switches between paging on the next line and then clicking back. See image below:

The reason this issue should be resolved is because the project volume has the potential to serve people from different demographic groups (especially those who may need to scroll or go out of this position to make the text bigger or smaller), Very wide project, really.

How can I achieve my goal highlighted in the example above? How can I place 4 or 5 or more (or less) border elements located next to each other, proportionally using% s, without splitting them?

Answer 1

You can use the experimental box model CSS3 declaration to make borders distract from the width of elements rather than add to it. This should prevent the problem. Quirksmode has a good entry on it. It is supported by IE8 / 9 and current versions of webkit, opera and ff.

 li { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 

Answer 2

The main problem here, I think, is that you “abuse” the width - the width should control the internal drawers, not the size of the external boxes. That is, your borders should be added to your drawers, not included in the estimated width.

As a result, you did not have many options:

• Using Javascript to do some fancy recount,
• See if you can call quirks mode and use the IE5 window model (NOT a good idea),
• Replacing the borders of several background images in a lot of folded divs (not nice) or
• Floating containers with a width of 20% and then adding width: auto divs (not width: 100%) with borders in parent floats.

I know that solution 4 sounds horrible and means non-semantic markup, but this is a common coolie and one that other developers are likely to understand (also) well.

Answer 3

This may sound awful, but why not use a background image to create a border?

 .box_20_percent { width:20%; float:left; padding:0; background-image:url([one_pixel_colored_image]); background-repeat:repeat-y; background-position:right } 

This should leave a “border” outside of resizing calculations.

Answer 4

If you declare a width border and negative margin in ems instead of pixels, then there is no wrapping / jumping. I understand that this can be cold comfort, as it will compromise your design a bit, but it works!