1

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

Improve this question
7
  • what are you expecting to happen? Commented Jul 5, 2013 at 17:16
  • You forgot main part - what do you want? Commented Jul 5, 2013 at 17:16
  • @Rooster if want the width to be auto where it have the width of the words. its 100%. and I can't change it. Commented Jul 5, 2013 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. Commented Jul 5, 2013 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! Commented Jul 5, 2013 at 17:30

8 Answers 8

Reset to default
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

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

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).
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/

Improve this answer

1 Comment

but there is another box . the other box will be next the first and I don't want that.
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?

Improve this answer

Comments

1

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.

Improve this answer

2 Comments

I would say inline-block would be better.
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.
0

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>
Improve this answer

Comments

0

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>

Improve this answer

Comments

-1

use display: inline-block

and add a class

.clear { clear:both;}

place it in between the boxes

so

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

Improve this answer

2 Comments

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

Improve this answer

4 Comments

-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
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!
When have you heard of a BOX mean that? Never
Where this box word comes from? Have you ever read w3c html specifications? 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.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.