Question

I have this code: http://jsfiddle.net/bUPWS/1/ but #div2 overflows #div1. How to bring the overflowed inputs next to the other ones?

    <div id="div1">
    <div id="div2">
        <form>
            <input/><br/><input/><br/><input/><br/><input/><br/><input/><br/><input/><br/><input/><br/><input/><br/><input/><br/><input/><br/>
        </form>
    </div>
</div>

#div1 {
    width:400px;
    height:100px;
    border:1px solid red;
}

Answer 1

seeing your code i can say you are using <br /> tag so there is no possible way to bring your inputs next to each other. just remove each <br/> all your inputs will align properly.

additionally you can use min-height for your parent div div1

#div1 {
    width:400px;
    min-height:100px;
    border:1px solid red;
}

#div2 input {display:inline; }

if your inputs increases more than the limit of 100px height your parent div will adjust the height with respect to the inputs inside your div2 block

EDIT: However to explain my comment below i have updated your fiddle example you can check how we can achieve it using <ul> <li></li></ul> tags

Fiddle example

Code if here!

HTML

<div id="div1">
    <div id="div2">
        <form>
            <ul>
                <li><input/></li>
                <li><input/></li>
                <li><input/></li>
                <li><input/></li>
                <li><input/></li>
           </ul>
            <ul>
                <li><input/></li>
                <li><input/></li>
                <li><input/></li>
                <li><input/></li>
                <li><input/></li>
            </ul>

        </form>
    </div>
</div>

CSS

#div1 {
    width:800px;
    min-height:100px;
    border:1px solid red;
}
*{padding:0; margin:0}
#div2 ul{float:left; padding-left:10px; }