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

Question

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

@Rooster if want the width to be auto where it have the width of the words. its 100%. and I can't change it. — Abdullah Salma, Jul 05 '13 at 17:18
@Cthulhu I want the div to be auto, means it will take the width of the words not the whole screen. from want I see the width is 100% and I can't change to auto. — Abdullah Salma, Jul 05 '13 at 17:20
because for `div` width `auto` and `100%` have a same meaning! what do expect? and `block` is also useless for `div` because it is by default! — Boynux, Jul 05 '13 at 17:30
Take a look at my updated answer below. You're looking for a 'snap-to-content' solution which is most easily done by floating your parent containers. — relic, Jul 05 '13 at 18:40

score 3 · Answer 1 · answered Jul 05 '13 at 17:20

3

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

answered Jul 05 '13 at 17:20

Rooster

9,954
8
44
71

1

display: inline-block is not necessary if float is set. Float itself is sufficient to make the element's width adjust to its content, and display property of floated element is just ignored (except for ancient IEs, where display:inline for floats prevented margin doubling bug). – Ilya Streltsyn Jul 05 '13 at 17:42

score 1 · Answer 2 · answered Jul 05 '13 at 17:16

1

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/

answered Jul 05 '13 at 17:16

Explosion Pills

188,624
52
326
405

but there is another box . the other box will be next the first and I don't want that. – Abdullah Salma Jul 05 '13 at 17:18

score 1 · Answer 3 · edited May 23 '17 at 11:56

1

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?

edited May 23 '17 at 11:56

Community

1
1

answered Jul 05 '13 at 17:28

Andrew Clody

1,171
6
13

score 1 · Answer 4 · edited Jul 05 '13 at 18:05

1

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

Float:left/right
Position: absolute
Display: inline-block
Display: inline-table
Display: table
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.

edited Jul 05 '13 at 18:05

Ryan B

3,364
21
35

answered Jul 05 '13 at 17:56

Ilya Streltsyn

13,076
2
37
57

I would say `inline-block` would be better. – Ryan B Jul 05 '13 at 18:06
inline-block changes the way the blocks are laid out, table doesn't. Also, inline-block makes the inter-tag whitespaces cause the gaps between elements, which is probably not what is wanted in this case. – Ilya Streltsyn Jul 05 '13 at 18:11

relic · Answer 5 · 2013-07-05T18:39:42.163

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>

sipp · Accepted Answer · 2013-07-05T17:37:08.490

0

use display: inline-block

and add a class

.clear { clear:both;}

place it in between the boxes

so

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

edited Jul 05 '13 at 17:37

answered Jul 05 '13 at 17:25

sipp

430
3
12

why is this negative, it works for me in the fiddle unless you can be more clear what you want the boxes to do. I'm going off of you said you don't want them by each other. – sipp Jul 05 '13 at 17:38
probably it's because clear is completely unnecessary for inline-blocks. The empty div alredy separates them into different lines because it's block element. But this non-semantic div as a separator also doesn't look like a good solution. – Ilya Streltsyn Jul 05 '13 at 18:00

score 0 · Answer 7 · answered Aug 06 '22 at 12:12

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>

score -1 · Answer 8 · answered Jul 05 '13 at 17:35

-1

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!

answered Jul 05 '13 at 17:35

Boynux

5,958
2
21
29

-1, I am guessing OP wants two boxes to hold content such as lists. A `span` is for stuff that's one line, not multi. The `div` is most likely the proper tag – Ryan B Jul 05 '13 at 18:10
Please don't guess! If he wants the tag not to expand he should consider span! not div because `div` is `block level` tag and `span` `inline` by its nature! That's what I got from question! – Boynux Jul 06 '13 at 03:18
When have you heard of a BOX mean that? Never – Ryan B Jul 06 '13 at 15:57
Where this `box` word comes from? Have you ever read w3c html specifications? http://www.w3.org/TR/html4/ I don't understand why some HTML developers try to invent new standards? Please find a meaning of `box` in HTML specifications and then explain meaning of box. Anyway I'm not going to continue this discussion with you! Just advise every one who's reading this message to read w3c html specifications first before starting to write any html code. – Boynux Jul 07 '13 at 06:50

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

Edit

8 Answers8

Linked