CODEWITHSUNDEEP
css
Frank Underwood
Frank Underwood

Reputation: 759

Add width to element with css

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!! :)

Upvotes: 2

Views: 8870

Answers (1)

Adjit
Adjit

Reputation: 10305

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);
}

Upvotes: 6

Related Questions