title: How do I get the window size in css?
body: <p>I am currently writing my header for my website, and I have a friend who is helping me. We have two very different computers (PC and Mac) and used different browsers to ensure that it is multiplatform and everything, and we found that the header doesn't fit on his screen. So I realized it would be easier to just get the windows width and divide that by four and make that the size of the buttons. How would I going about doing this?</p>
  
  <p>Thanks so much!</p>
  
  <p>EDIT:
  Here is what I am using:</p>
  
  <pre><code>    div.horizontal
  {
      position: relative;
      width: 100%;
      height:45px;
  }   
  
  div.horizontal ul
  {
  list-style-type:none;
  margin:0;
  padding:0;
  } 
  
  div.horizontal li
  {
  float:left;
  }
  
  div.horizontal a
  {
  display:block;
  background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.10) 52%, rgba(255,255,255,0) 100%), url("../img/truefactzheader.png");
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(52%,rgba(255,255,255,0.10)), color-stop(100%,rgba(255,255,255,0))), url("../img/truefactzheader.png");
  background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.10) 52%,rgba(255,255,255,0) 100%), url("../img/truefactzheader.png");
  background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.10) 52%,rgba(255,255,255,0) 100%), url("../img/truefactzheader.png");
  background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.10) 52%,rgba(255,255,255,0) 100%), url("../img/truefactzheader.png");
  background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.10) 52%,rgba(255,255,255,0) 100%), url("../img/truefactzheader.png");
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=0 );
  width:25%;
  height:35px;
  }
  
  div.horizontal a:link,div.horizontal a:visited
  {
  font-weight:bold;
  color:#FFFFFF;
  text-align:center;
  vertical-align:middle;
  padding:4px;
  text-decoration:none;
  text-transform:uppercase;
  }
  
  div.horizontal a:hover,div.horizontal a:active
  {
  height:45px;
  background: -moz-linear-gradient(top,  rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.25) 100%), url("../img/truefactzheader.png");
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.25)), color-stop(100%,rgba(0,0,0,0.25))), url("../img/truefactzheader.png");
  background: -webkit-linear-gradient(top,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0.25) 100%), url("../img/truefactzheader.png");
  background: -o-linear-gradient(top,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0.25) 100%), url("../img/truefactzheader.png");
  background: -ms-linear-gradient(top,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0.25) 100%), url("../img/truefactzheader.png");
  background: linear-gradient(to bottom,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0.25) 100%), url("../img/truefactzheader.png");
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99000000', endColorstr='#99000000',GradientType=0 );
  a:link {text-decoration:none;}
  a:visited {text-decoration:none;}
  }
  </code></pre>