在div内添加新元素可将其他元素上下推

Question

We are using a template we bought, I'm trying to shape a page but a div is being problematic.

When I try to add new text boxes inside, other ones at the bottom gets pushed out.

This is my first time with bootstrap and I'm fairly new to css too. I dont know what is causing the problem.

This is the codepiece in middle of work. 2 more textboxes to bottom and a combobox at the top will be added too.

<div class="register-container animated fadeInDown">
    <div class="registerbox bg-white">
        <div class="registerbox-title">Register</div>
        @Html.ValidationSummary("", new { @class = "text-danger" })

        <div class="registerbox-caption ">Lütfen Bilgilerinizi Giriniz</div>
        <div class="registerbox-textbox">
            @Html.Bootstrap().TextBoxFor(t => t.FirmaUnvani).Placeholder("Firma Ünvanı")
        </div>
        <div class="registerbox-textbox">
            @Html.Bootstrap().TextBoxFor(t => t.Sehir).Placeholder("Şehir")
        </div>
        <div class="registerbox-textbox">
            @Html.Bootstrap().TextBoxFor(t => t.Adres).Placeholder("Adres")
        </div>
        <div class="registerbox-textbox">
            @Html.Bootstrap().TextBoxFor(t => t.PostaKodu).Placeholder("Posta Kodu")
        </div>
        <div class="registerbox-textbox">
            @Html.Bootstrap().TextBoxFor(t => t.Email).Placeholder("Email Address")
        </div>
        <div class="registerbox-textbox">
            @Html.Bootstrap().TextBoxFor(t => t.Email).Placeholder("Email Address")
        </div>
        <div class="registerbox-textbox">
            @Html.Bootstrap().TextBoxFor(t => t.Email).Placeholder("Email Address")
        </div>
        <div class="registerbox-textbox">
            @Html.Bootstrap().PasswordFor(t => t.Password).Placeholder("Enter Password")
        </div>
        <div class="registerbox-textbox">
            @Html.Bootstrap().PasswordFor(t => t.ConfirmPassword).Placeholder("Confirm Password")
        </div>
        @*<hr class="wide" />*@
        <div class="registerbox-textbox">
            @Html.Bootstrap().TextBoxFor(t => t.Name).Placeholder("Name")
        </div>
        <div class="registerbox-textbox">
            @Html.Bootstrap().TextBoxFor(t => t.Family).Placeholder("Family")
        </div>
        <div style="padding-bottom:5px;padding-left:5px;background-color:white">
            <div class="checkbox">
                <label>
                    <input type="checkbox" class="colored-primary" checked="checked">
                    <span class="text darkgray"> <a class="themeprimary">Portal Kullanım Sözleşmesi</a>'ni okudum ve kabul ediyorum.</span>
                </label>
            </div>
        </div>
        <div class="registerbox-submit">
            @Html.Bootstrap().SubmitButton().Text("SUBMIT").Color(BootstrapColors.Primary).HtmlAttributes(new { @class = "pull-right" })
        </div>
    </div>
    <div class="logobox">
    </div>
</div>

and this is the original version of same page on template.

<div class="register-container animated fadeInDown">
        <div class="registerbox bg-white">
            <div class="registerbox-title">Register</div>
            @Html.ValidationSummary("", new { @class = "text-danger" })

            <div class="registerbox-caption ">Please fill in your information</div>
            <div class="registerbox-textbox">
                @Html.Bootstrap().TextBoxFor(t => t.Email).Placeholder("Email Address")
            </div>
            <div class="registerbox-textbox">
                @Html.Bootstrap().PasswordFor(t => t.Password).Placeholder("Enter Password")
            </div>
            <div class="registerbox-textbox">
                @Html.Bootstrap().PasswordFor(t => t.ConfirmPassword).Placeholder("Confirm Password")
            </div>
            <hr class="wide" />
            <div class="registerbox-textbox">
                @Html.Bootstrap().TextBoxFor(t => t.Name).Placeholder("Name")
            </div>
            <div class="registerbox-textbox">
                @Html.Bootstrap().TextBoxFor(t => t.Family).Placeholder("Family")
            </div>
            <div class="registerbox-textbox">
                <div class="row">
                    <div class="col-lg-6 col-sm-6 col-xs-6 padding-right-10">
                        @Html.Bootstrap().TextBoxFor(t => t.Month).Placeholder("Month")
                    </div>
                    <div class="col-lg-3 col-sm-3 col-xs-3 no-padding padding-right-10">
                        @Html.Bootstrap().TextBoxFor(t => t.Day).Placeholder("Day")
                    </div>
                    <div class="col-lg-3 col-sm-3 col-xs-3 no-padding-left">
                        @Html.Bootstrap().TextBoxFor(t => t.Year).Placeholder("Year")
                    </div>
                </div>
            </div>
            <div class="registerbox-textbox no-padding-bottom">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" class="colored-primary" checked="checked">
                        <span class="text darkgray">I agree to the Company <a class="themeprimary">Terms of Service</a> and Privacy Policy</span>
                    </label>
                </div>
            </div>
            <div class="registerbox-submit">
                @Html.Bootstrap().SubmitButton().Text("SUBMIT").Color(BootstrapColors.Primary).HtmlAttributes(new { @class = "pull-right" })
            </div>
        </div>
        <div class="logobox">
        </div>
    </div>

Broken version, submit is so badly pushed down that there is 1 or 2 pixels between it and the end of page. And I dont know why page is not resizing itself too.

template original version for getting a sense

My main problem is, being new to this I don't know where to look at or change what. Also, "register-container" is present at two css sheets. Both a one long line...

edit:

As I said those css sheets are a mess, a real mess. I'm pasting everything related to registerbox and register-containers now.

Results having Registerbox in beyond-rtl.min.css

.register-container.registerbox{
    position:relative;
    width:350px !important;
    height:560px !important;
    padding:0;
    -webkit-box-shadow:0 0 14px rgba(0,0,0,.1);
    -moz-box-shadow:0 0 14px rgba(0,0,0,.1);
    box-shadow:0 0 14px rgba(0,0,0,.1)
}
.register-container .registerbox .registerbox-title{
    position:relative;
    text-align:right;
    width:100%;
    height:35px;
    padding:20px 20px 0;
    font-family:'Lucida Sans','trebuchet MS',Arial,Helvetica;
    font-size:18px;
    text-transform:uppercase;
    font-weight:normal;
    color:#444
}
.register-container .registerbox .registerbox-caption{
    font-size:14px;
    font-weight:500;
    color:#a9a9a9;
    padding:15px 20px 0
}
.register-container .registerbox .registerbox-textbox{
    padding:10px 20px
}
.register-container .registerbox .registerbox-textbox .form-control{
    -webkit-border-radius:3px !important;
    -webkit-background-clip:padding-box !important;
    -moz-border-radius:3px !important;
    -moz-background-clip:padding !important;
    border-radius:3px !important;
    background-clip:padding-box !important
}
.register-container .registerbox .registerbox-submit{
    padding:0 20px
}

Results having registerbox in beyond-min.css

.registerbox{
    position:relative;
    width:350px !important;
    height:560px !important;
    padding:0;
    -webkit-box-shadow:0 0 14px rgba(0,0,0,.1);
    -moz-box-shadow:0 0 14px rgba(0,0,0,.1);
    box-shadow:0 0 14px rgba(0,0,0,.1)
}
.register-container .registerbox .registerbox-title{
    position:relative;
    text-align:left;
    width:100%;
    height:35px;
    padding:20px 20px 0;
    font-family:'Lucida Sans','trebuchet MS',Arial,Helvetica;
    font-size:18px;
    text-transform:uppercase;
    font-weight:normal;
    color:#444
}
.register-container .registerbox .registerbox-caption{
    font-size:14px;
    font-weight:500;
    color:#a9a9a9;
    padding:15px 20px 0
}
.register-container .registerbox .registerbox-textbox{
    padding:10px 20px
}
.register-container .registerbox .registerbox-textbox .form-control{
    -webkit-border-radius:3px !important;
    -webkit-background-clip:padding-box !important;
    -moz-border-radius:3px !important;
    -moz-background-clip:padding !important;
    border-radius:3px !important;
    background-clip:padding-box !important
}
.register-container .registerbox .registerbox-submit{
    padding:0 20px
}

register-container in beyond-rtl.min.css

register-container{
    position:relative;
    margin:8% auto;
    max-width:350px
}

Answer 1

registerbox is where your problem is at, you need to increase the height property. I would first put the style directly on the div right after the class="" property to test to make sure that increasing it will work. This way you won't have to mess with the css just yet.

Once you figure out how much to increase the height, the you can modify the CSS file with the proper value.

Answer 2

Gravedigging a bit here, but unminified your code to make it a bit easier to read, and every height property I see has a static value (ie 350px) which is the problem. You'll need to change these heights in your containers to allow for more content or allow the browser to automatically choose its height.