Add width to element with css

Question

I have a bunch of classes, here are 3 as example:

.col-1-3{
    width:calc(100%/(3/1));
}
.col-2-3{
    width:calc(100%/(3/2));
}
.col-1{
    width:100%;
}

(all of these are inline-block and position relative if that info might be useful....)

Now, if an element with any of those classes applied, also have another class applied, lets call it 'batman', I need the element to grow 30px in width.

Without touching each and everyone of my .col-* classes and in there add the 30px, is there any! other way to add to an elements width? see example pseudo code:

.batman{
    add-to-width:30px;
}

I was thinking perhaps with :before and/or :after. Adding a pseudo element and somehow move it 15px to the left/right and the main element would follow/grow...but it didnt work....

requirement: strictly css, no javascript please.

Any idea?

thanks in advance!! :)

Can you use something other than width, like padding or margin? — Rob Allen, Sep 26 '16 at 20:05
and all of this said, anything other than determining if and how it could be done, you should probably consider using SASS to create a grid layout and anything that breaks the mold, should have very modular css — Rob Allen, Sep 26 '16 at 20:09
Yeah I guess sass is the only way, thats what i was afraid of. calc() on the col* classes is exactly what im trying not to do. tried margin and padding, did not solve my problem. thanks though guys! — Frank Underwood, Sep 26 '16 at 21:07

score 6 · Answer 1 · answered Sep 26 '16 at 20:06

6

I believe You have 2 options - first is something like a margin since margins will stack, the other is using calc()

.batman {
    margin: 0 15px;
}

or

.batman {
    width: calc(100% + 30px);
}

answered Sep 26 '16 at 20:06

Adjit

10,134
12
53
98

calc is what im trying not to do. Tried margin but it didnt solve my problem, will try again. thank you Adjit – Frank Underwood Sep 26 '16 at 21:08
@FrankUnderwood Why are you trying to avoid `calc`? – Adjit Sep 26 '16 at 21:10
Because then I have to do it on every single col-* class, as they got different widths. If i instead could tack on the 30px, regardless of the current width, by just creating one new class, it would save a lot of (almost) repeating myself. – Frank Underwood Sep 26 '16 at 21:16
This question is related, to the answer of a question i asked yesterday: https://stackoverflow.com/questions/39685497/gutter-between-divs/ – Frank Underwood Sep 26 '16 at 21:17
@FrankUnderwood well you could just create a rule that selects any class that starts with `col-` if you are using CSS3 (which you are if you are already utilizing calc) http://stackoverflow.com/questions/3338680/is-there-a-css-selector-by-class-prefix – Adjit Sep 26 '16 at 21:20
But the widths are different, see my original post, i only provided 3 column classes, but i got around 20. As the width (plus the additional 30px) is different for each, using pseudo classes would not help. Its ok though, I will have to just use calc() and create a bunch of new ones, just thought i should ask on SO before, it was a long stretch though :/ – Frank Underwood Sep 26 '16 at 21:26
@FrankUnderwood well actually, do you think a border would work? if you just add a 15px border left and right for any `batman` class? – Adjit Sep 26 '16 at 21:30

Add width to element with css

1 Answers1