CODEWITHSUNDEEP
csssass
Gajen
Gajen

Reputation: 466

How to calculate div width after margin?

I'm working on a responsive website and I'm coming across a problem. I've a div container which width is 100%, and inside it I've 2 div's sidebar and content. Sidebar is set 40% wide and content is set to 60%.

Now, I want to give 25px space between them and for that I used margin-left:25px;.

Now, what will the width of content in % or is there any formula to calcute?

Here is what I am to do - JSFIDDLE

Upvotes: 2

Views: 779

Answers (2)

codingrose
codingrose

Reputation: 15699

Yes, there is a way to achieve this using calc function.

.content {
    margin-left:calc(40% + 25px);
}

But, the disadvantage is that, calc is not cross browser. It won't work in IE.

See updated fiddle here.

Upvotes: 1

SW4
SW4

Reputation: 71170

You could change your CSS to use calc for the width values, you want to subtract 1/2 the amount of the gap in px you want, then add the same amount to the relevant margins:

Demo Fiddle

.container {
    background:#ccc;
}
.sidebar {
    width:calc(40% - 12.5px);
    margin-right:12.5px;
    background:red;
    height:50px;
    float:left;
}
.content {
    width:calc(60% - 12.5px);
    margin-left:12.5px;
    background:green;
    height:50px;
    float:left;
}

Upvotes: 2

Related Questions