- This topic is empty.
December 16, 2011 at 8:48 pm #35687theriseoffredMember
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:
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, FredDecember 17, 2011 at 2:52 am #92936mrtphotogParticipant
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.December 17, 2011 at 3:30 am #92939joshuanhibbertMember
Still playing around, but my laptop battery is about to die. How about something like this? http://jsfiddle.net/sl1dr/PEwa9/December 17, 2011 at 8:32 am #92952MarieMember
Be careful with % widths. Keep in mind what will happen if you browse on mobile…
- The forum ‘CSS’ is closed to new topics and replies.