HTML / CSS-如何根据其内容调整div的大小？

Question

I have 2 divs side by side.

In the first div, I have 2 labels side by side, and one input text below them. One of the labels is an error information. Sometimes it will be displayed, sometimes not. When it's not display, I'd like the div to resize to be smaller, so the second div can be closer to it.

The second thing is the same thing, except it has one label div, therefore it doesn't requires a resize.

Is there a way to achieve what I want? There is an awesomely drawn example of what I want to acahieve below:

This is the code.

<div id="main-div">
<div id="address-number-div">
    <label>Number</label>
    <label class="error" id="number-error">Empty Field</label>
    <input id="number-input" onfocus="onfocus('number-error')"/>
</div> 

<div id="address-complement-div">
    <label>Complement</label>
    <input id="complement-input" />
</div>

​

and CSS:

div {border: 1px solid #000000; padding: 5px;}

.error{color:#FF0000; margin-left:5px;}

#main-div div {display:inline-block;}

#main-div input {display:block;}

#number-input {
    width: 16%;
}​

Answer 1

Set them to display: inline-block; to let them shrink to fit the the content.

Answer 2

Have a look at this DEMO .

Floating your divs left should solve this problem.

Answer 3

Don't give width <persentage> type value, give <length> :

#number-input { width: 24px; }​

See it with your code on my fiddle .