CODEWITHSUNDEEP
phpjavascripthtmlcssweb
user569322
user569322

Reputation:

How to make a div 100% width minus a certain amount?

So I have a div that I want to be:

100% width (of viewport) - 150px

How would I show this in CSS or Javascript?

Upvotes: 4

Views: 2130

Answers (4)

user74847
user74847

Reputation: 361

Heres everything put together...

http://toomanyprojects.weare88.com/uploads/fixed-col-fluid-col/

Upvotes: 0

Li Haoyi
Li Haoyi

Reputation: 15802

You may want to go look up the CSS style

box-sizing: border-box;

Normally, the 100% is calculated for the size of the insides, which is utterly useless if your box contains any sort of padding or border whatsoever. With box-sizing, it is calculated for the outside of the border to be that size. Incredibly useful for making % sized divs with non-zero padding and border line up properly.

Upvotes: 2

Timur
Timur

Reputation: 6718

Container of your div must be position:relative (or absolute...but not default), and div style must be like this:

position:relative;
width:auto;
margin:0px 150px 0px 0px;

Upvotes: 6

nunopolonia
nunopolonia

Reputation: 14417

You can use jQuery $(window) selector to get the viewport width and change the width of the div you want

  var width = $(window).width();
  $("div").css("width", width-150);

Upvotes: 2

Related Questions