Copy a CSS class value and generate a new value?

Question

I am using a grid system for my web page layout, much like the Grid 960 layout. I have a bunch of predefined classes for all the grid widths. When I want a div to be a certain width, I simply do:

<div class="grid_4">
  ...
</div>

However, for some of my divs I add borders so I created a custom border class that I add to those divs for which I want a border.

.right-border {
  border-right: 1px solid #e1e1e1;
}

<div class="grid_4 right-border">
  ....
</div>

The problem is that when I add a border, the grid system fails since there isn't enough room across the page to fit all the divs (since one of them has a border). I can manually adjust every div I add a border to, but I want a cleaner solution since every width of every grid is different (depending on which grid class I use).

Is there a way to get the current divs width, and simply subtract 1 for those divs that have a class of right-border? I'm thinking this is likely only doable with jQuery, but perhaps theres some CSS magic I don't know about that will accomplish this.

Any ideas?

@AtalShrivastava That feels too imprecise to me. 99% width is variable depending on the div width. — Garfonzo
– Garfonzo, Commented Mar 22, 2014 at 18:19

Faust · Accepted Answer · 2014-03-22 19:48:46Z

6

You can try border-boxes (if your grid systems doesn't already) so that the width of the element will include the border:

[class*="grid_"]{box-sizing:border-box}

So that adding a border (or padding) won't affect the computed width of the element -- instead the content area shrinks appropriately.

edited Mar 22, 2014 at 19:48

answered Mar 22, 2014 at 18:17

Faust

15.5k10 gold badges58 silver badges116 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Salman Arshad Over a year ago

Don't forget to add vendor prefixes (-moz, -ms, -o etc).

Garfonzo Over a year ago

Perfect! I knew someone would have some magic that I had not yet learned. Thx.

Hashem Qolami Over a year ago

You should remove the leading period from .grid_ within your attribute selector.

Collectives™ on Stack Overflow

Copy a CSS class value and generate a new value?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related