Q:

CSS: I can't set width to "auto" always appear 100%

for some reason 
the width of the div is 100% and if i set it to auto, nothing changes. tried display: block; and still nothing.
what I have in 
index.html

.box {
  border: 1px solid #555;
  display: block;
  width: auto;
}
<head>
  <title>project x</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class='box'>This is a box</div>
  <div class='box'>This is another box</div>
</body>

I enjoy cracking problems but this one crack me.
Edit
I want the div to take the width of the words. I don't want it to be 100%.

A:

adding to Explosion Pills answer now that its clear what you want, this css should work.
.box {
    border: 1px solid #555; 
    display: inline-block;        
    float:left;
    clear:both;
}

Alternatively, you could place some <br> tags after each <div> block

A:

use display: inline-block
and add a class
.clear { clear:both;}
place it in between the boxes
so 
http://jsfiddle.net/HpMSU/1/

