Gutter between %-width divs?

[theriseoffred]

Hi guys, CSS newb here.
I’m having a little problem with widths – namely my design has a %-width sidebar, which I would like to look something like this:

.
(Four boxes of equal width for Facebook/Twitter/G+/RSS, with a searchform below, then a sidebar, with the little “gutters” aligning nicely and retaining grid structure)

But at the moment, the closest I’ve managed to get to is something like this.

• The problem with using percentage widths is that browsers can’t handle fractions, and different browsers deal with that differently, so the boxes always end up ever so slightly misaligned, which doesn’t look nice.
• Is there a way to do it using fixed widths? Well, I tried setting each box to 25%, then using

  border-right:4px solid transparent; margin-right:-4px

  which just about worked, but made the text align slightly differently and it seemed quite complicated. Also there were some minor issues with 75% not being the same as 3 lots of 25% in certain cases.

• The ugly HTML way is an option, but even with

  I couldn’t get it to work very nicely, again due to percentages/fractions of pixels.

• JS/jQuery? I wouldn’t have a clue how to code it, but it seems possible that you could declare $width = floor(width of side section/4)-4px, then work from there?

Anyone got any suggestions?

Thanks, Fred

[mrtphotog]

I forked it.. You can find it here! Still playing with it.
I moved the classes for the social bookmarks to ‘a’ instead of ‘li’.
Now i can go ahead and make the ‘li’s 25% and the give the nested links enough margin to to create the spacing between. I like using grid systems for gutters not I’m not interested in a % gutter between the links. I gave them a padding of 3px each, that 6px gutter between the links.
I got rid of margins on left and right for first and last child respectively.
Pros: it looks great 90% of the time.
Cons: if you make the sidebar really narrow, like 50px or so, you will notice the first and last item are 3px wider than the center two. But if you are doing that.. the rest of the page would have much bigger problems.

[joshuanhibbert]

Still playing around, but my laptop battery is about to die. How about something like this? http://jsfiddle.net/sl1dr/PEwa9/

[Marie]

Be careful with % widths. Keep in mind what will happen if you browse on mobile…

[Author]

Posts