Making the container the same width of its content

Question

I am mamking a page where there are boxes of contents, and the boxes are responsive so that when there is not enough space, there will be a line break and falls to the other line. I want to absolutely position something relative to the right-most box on the top, so I need a container to have exactly the same width of the boxes, even when I resize the window, and then I can position:absolute the element I want to place there.

I have came across this post. It tells me to use display:inline-block; to do the trick, but it doesn't work as I expected. See My example here. I want the blue border container to be exactly the same width of its content when I resize, but not wider.

I have also tried display:inline;, but it becomes two lines. I want it to be in one box instead so when I use right:0, it will not be referring to the last box on the bottom.

Any idea on this issue? Thanks!

If I understand the question, your first example seems to be working perfectly in chrome. What browser are you using? — sn3ll, Dec 10 '13 at 15:56
No. I mean when I resize the window in the example, The container is not exactly the same width as its content, but it is wider than what it should be. I am using chrome. Maybe let me edit the question to clarify what I mean. — user2335065, Dec 10 '13 at 15:59
Can you provide an illustration of what you're looking for, like an image? It's not doing any good for us to guess the finer details of what you want. — TreeTree, Dec 10 '13 at 16:14
[Here](http://jsfiddle.net/WH6XD/5/), I deleted the margin to illustrate the problem. As the red box is now 30px width each, what I want is to make the blue container has a width of multiples of 30, so it's filled with the red boxes exactly, with no gaps. It should not have any chance to have a width of like 160px, even if the browser window is so. — user2335065, Dec 11 '13 at 00:30

score 0 · Answer 1 · answered Dec 10 '13 at 15:48

Is this what you mean? http://jsfiddle.net/WH6XD/4/

.box_holder {
    border:1px solid red;
    display:inline-block;
    white-space:nowrap;  //new line
    padding:10px;  //new line
}
.box {
    width:30px;
    height:20px;
    margin-left:10px;  //changed from margin
    background-color:red;
    display:inline-block;  
    vertical-align:top;  //new line
}

.box:first-child {  //new rule
    margin-left:0;
}

score 0 · Answer 2 · answered Dec 10 '13 at 15:57

You may need to set a "min-width: XXXpx;" descriptor to prevent the window resizing your container. "display:inline-block;" simply tells the divs to prevent the default block attribution which tells each successive div to be treated as a line break. It does not prevent a line break from occuring when the content window space is full. think of it as causing divs to function as letters in a text field, where when the space used is full, it breaks to the next line.

Making the container the same width of its content

2 Answers2