CODEWITHSUNDEEP
csssasscompass-sass
shackleton
shackleton

Reputation: 793

SASS/Compass Math using dynamic width

I have a container div of flexible width (90%). I would like its child div to always be 180px smaller than the parent, in terms of width.

I know this can be accomplished in JS but I'm trying to use as much CSS as possible. I have a feeling this is beyond what CSS can do, but wanted to be sure.

I want to get the width of the child (in px) and subtract 180px. Is that possible?

Markup:

<div id="main">
    <div class="block"></div>
</div>

SCSS:

#main {
  width: 90%;
  max-width: 1600px;

  .block {
    /* incorrect code: */
    width: WIDTH_OF_PARENT - 180px;
  }
}

Upvotes: 1

Views: 1983

Answers (4)

ediblecode
ediblecode

Reputation: 11971

To specifically answer your question, you can use calc

-webkit-calc(100% - 180px)
-moz-calc(100% - 180px)
calc(100% - 180px)

However, I'd recommend you use margin

Upvotes: 0

cimmanon
cimmanon

Reputation: 68319

The CSS calc() function has rather low support (particularly in mobile browsers). If you want to maximize your browser support, use margins instead:

http://jsfiddle.net/CV5nb/

#main {
    width: 90%;
    max-width: 1600px;
}
.block {
    margin-left: 180px; /* or margin-left: 90px; margin-right: 90px */
}

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115046

calc is the anwser: IE9+ : http://caniuse.com/calc

JSFiddle Demo

CSS

#main {
    margin:25px auto;
    width:90%;
    max-width:1200px;
    border:1px solid green;
    padding:10px;
}

.block {
    border:1px solid red;
    height:25px;
    width: calc(100% - 180px);    
}

Probably advisable to use box-sizing:border-box to avoid confusion too.

NB. If the inner div is to be centered then a simple 90px side margin would work too: http://jsfiddle.net/Paulie_D/g2bFT/2/

Upvotes: 0

Phlume
Phlume

Reputation: 3131

Use the calc function in the css:

width: calc(100%-180px);

Upvotes: 0

Related Questions