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
– Rob Allen, Commented Sep 26, 2016 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
– Rob Allen, Commented Sep 26, 2016 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
– Frank Underwood, Commented Sep 26, 2016 at 21:07

Adjit · Accepted Answer · 2016-09-26 20:06:53Z

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, 2016 at 20:06

Adjit

10.3k13 gold badges57 silver badges102 bronze badges

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

7 Comments

Frank Underwood Over a year ago

calc is what im trying not to do. Tried margin but it didnt solve my problem, will try again. thank you Adjit

Adjit Over a year ago

@FrankUnderwood Why are you trying to avoid calc?

Frank Underwood Over a year ago

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 Over a year ago

This question is related, to the answer of a question i asked yesterday: stackoverflow.com/questions/39685497/gutter-between-divs

Adjit Over a year ago

@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) stackoverflow.com/questions/3338680/…

|

Collectives™ on Stack Overflow

Add width to element with css

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related