CODEWITHSUNDEEP
htmlcss
Abdullah Salma
Abdullah Salma

Reputation: 570

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%.

Upvotes: 1

Views: 7046

Answers (8)

Sharak
Sharak

Reputation: 1010

I know this question doesn't mention centering the element, but that's what I was looking for when I was directed here.

display: inline-block does its job in terms of width, but doesn't work if you also want to center the block. You can add text-align: center to the parent, but then you would have to override this property for all other elements inside you don't want centered.

div {
  border: 1px solid #aaa;
  padding: 1rem;
  display: inline-block;
  margin: 0 auto; // doesn't work with inline-block
}
<div>Content</div>

To handle it properly just for this element you need display: table:

div {
  border: 1px solid #aaa;
  padding: 1rem;
  display: table;
  margin: 0 auto;
}
<div>Content</div>

Upvotes: 0

relic
relic

Reputation: 1704

Setting width:auto; is close to the same as setting width:100%; (the only real difference is that they handle margin and padding differently).

Also, div objects are by default block elements, so setting display:block; won't change their behavior.

You said you want the div to take up the width of the words. To do that you can either set display:table-cell (which is not very IE friendly) or you can float the div and it will snap to fit the contents inside.

.box { float:left; }

Make sure to properly clear your float after the div to avoid breaking the layout of contents below it.

.clear { clear:both; height:0px; } 

<div class="clear"></div>

Upvotes: 0

Ilya Streltsyn
Ilya Streltsyn

Reputation: 13556

The following options can change the behavior of width: auto from using the available container width to so called shrink-to-fit algorithm:

  1. Float:left/right
  2. Position: absolute
  3. Display: inline-block
  4. Display: inline-table
  5. Display: table
  6. Display: table-cell

Assuming you need that the blocks to stay in the block formatting context of the normal flow (i.e. to go one after another vertically as usually, just have the width of their content), I suppose that in this case display: table will be the best solution.

Upvotes: 1

sipp
sipp

Reputation: 420

use display: inline-block

and add a class

.clear { clear:both;}

place it in between the boxes

so

http://jsfiddle.net/HpMSU/1/

Upvotes: -1

Boynux
Boynux

Reputation: 6222

I think you want this result:

<head>
    <title>project x</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <span class='box'>This is a box</span>
    <span class='box'>This is another box</span>
</body>

.box {
    border: 1px solid #555; 
}

I just changed div to span! try to use proper HTML tags!

Upvotes: -1

Andrew Clody
Andrew Clody

Reputation: 1181

width:auto on a DIV expands it to fill it's parent, not to be sized by it's children.

ex: http://jsfiddle.net/nTWvr/

To size a DIV by it's content, there are a few methods: How to make div not larger than its contents?

Upvotes: 1

Rooster
Rooster

Reputation: 10077

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

Upvotes: 3

Explosion Pills
Explosion Pills

Reputation: 191809

Width display: block, the elements will always use as much width as is available. It seems like you want to use display: inline-block

http://jsfiddle.net/HpMSU/

Upvotes: 1

Related Questions