Search code examples
csshtmlautosize

HTML/CSS - How do I make divs to size according to their contents?

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:

Awesomely Drawn Example Of Autosize Width

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%;
}​
Solution

  • Have a look at this DEMO.

    Floating your divs left should solve this problem.