CODEWITHSUNDEEP
csscss-selectorswidth
codingrose
codingrose

Reputation: 15699

CSS - Calc alternative

I have developed code which works perfectly fine, but as I have used calc function, some browsers do not support it. I have no clue of using alternative to it.

I have seen some answers and also tried using relative,absolute positions. However, none of them worked for my scenario.

My code:

HTML:

<div class="row">
    <img height="35" width="35" class="img left" />
    <div class="title left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices orci mauris, sit amet luctus enim sodales id.</div>
    <div class="right">
        <div class="type"></div>
    </div>
    <div class="clr"></div>
    <div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices orci mauris.</div>
</div>

CSS:

.title{width:calc(100% - 50px);} // 35px of image + 5px margin + 10px of icon

See Fiddle here.

PS: I want CSS only solution. Right now, as I dont have any solution I am using javascript to adjust width.

Any help would be appreciated. Thanks for your time.

Upvotes: 1

Views: 976

Answers (1)

Richa
Richa

Reputation: 4270

is this you want Demo

.title {
    margin:0 10px 0 40px;
}

Upvotes: 1

Related Questions