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


Tags: css,html,autosize

Problem :

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.


    CSS Howto..

    How to Implement YUI Compresser in a website [closed]

    How to use PHP to get the value of a star rating widget?

    How to fill width with flex boxes

    How to hide a part of a CSS borderline nicely

    how to load multiple lazy css load file

    css how to only make bold fonts for first
      set

    How to shorten blockquote to wrap around floated div?

    How to enable auto indentation in lists and list items?

    How can I set a floats width to the left over space?

    How do i make this nav 100% wide?

    How to make an image appear over another image when mouse hovers with css3?

    How to access to a CSS file in HTML?

    How to force firefox to use custom CSS for anchor tags that contain “#” or “javascript:”?

    How to center the image source within an image tag?

    How to set Bootstrap's hero unit height to 100%?

    can anyone explain to me what does (content: “\f01a”; ) on css means? and how to use it?

    How to Change a Plugin's CSS

    How to I have a within a
  • align to the right side of the
  • Using CSS approach how to set an image to fill a path in SVG?

    How to add a fade out at the end of this CSS animation?

    “Pull center” in Bootstrap: A -D- B -E- C columns collapsing to A-B-C // D-E, how to get B between D and E?

    How to create a border-bottom in CSS using a text character such as a dash, letter or number

    How to integrate CSS