CODEWITHSUNDEEP
htmlcss
Apostolos
Apostolos

Reputation: 8101

div not applying on whole form

I have an html form and a css file

html:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="../css/myframework.css">
        <title>Forms</title>
    </head>
    <body>
        <div class="css-form-pane">
            <form>
                <div class="css-form-group css-col-3">
                    <label for="id_input1">A label input</label>
                    <input type="text" id="id_input1" class="form-input">
                </div>
                <div class="css-form-group css-col-3">
                    <label for="id_input2">A larger label input</label>
                    <input type="text" id="id_input2" class="form-input">            
                </div>
                <div class="css-form-group css-col-3">
                    <label for="id_input3">A label input</label>
                    <input type="text" id="id_inputp3" class="form-input">
                </div>
                <div class="css-form-submit css-col-3">
                    <input type='submit' name= "submit" value="submit" class="css-btn css-btn-submit">
                    <input type='submit' name= "cancel" value="Cancel" class="css-btn css-btn-submit">
                </div>
            </form>
        </div>
    </body>    
</html>

and the css:

.css-form-group{
    margin-bottom:10px;
    clear:both;
}    

.css-form-group label{
    font-weight: bold;
}

.form-input{
    float: right;
}

.form-input:focus{
    background: yellow;
}

/*sizes*/
.css-col-3{
    width:25%;
}

.css-form-submit{
    clear:both;
}

.css-form-submit input[type='submit']{
    float:right;
}

.css-form-pane{
    background: rgb(212,208,200);
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    border: 1px solid #e3e3e3;
    webkit-box-shadow::inset 0 1px 1px rgba(0, 0, 0, 0.05);
          -box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}

I borrowed some names from the bootstrap framework. here is the jsfiddle. The problem is that the form-pane won't apply on the whole form so the buttons are left outside of the form-pane. Also although the form-group total measurements are 328x20 on my screen at least I cannot set a width for example 500px on the form-pane, and not sure why cause the labels and inputs do fit that size. Could you please explain to me why is this happening so I can deal with it once and for all?

Upvotes: 0

Views: 129

Answers (1)

Bobby5193
Bobby5193

Reputation: 1625

You have to apply the clear:both css property after all the floats, not during the last float:

 <div class="css-form-submit css-col-3">
                <input type='submit' name= "submit" value="submit" class="css-btn css-btn-submit">
                <input type='submit' name="cancel" value="Cancel" class="css-btn css-btn-submit">
            </div>
 <div style='clear:both'></div>

So remove the clear:both from the form-submit class and apply it after the div.

Here is a working fiddle :

fiddle

Upvotes: 2

Related Questions