div not applying on whole form

Question

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?

possible duplicate of [How do you keep parents of floated elements from collapsing?](http://stackoverflow.com/questions/218760/how-do-you-keep-parents-of-floated-elements-from-collapsing) — Quentin, Mar 12 '14 at 09:52
I am not really following what the issue is here but a couple of tips: 1. make sure to close your input tags `` instead of ``. 2. `box-shadow` no longer requires vendor prefixing. 3. If you apply `overflow: hidden;` to the 'form pane' it will clear elements that are floated inside it, which may help your issue. — nickspiel, Mar 12 '14 at 10:00
Yes thank you. @Quentin your post was very good read. Just didn't know I was talking about the term collapsing. — Apostolos, Mar 12 '14 at 10:03
@Quentin http://stackoverflow.com/questions/3558119/are-self-closing-tags-valid-in-html5 - heh, you learn something new everyday :) god bless stack overflow. — nickspiel, Mar 12 '14 at 10:13

score 2 · Accepted Answer · answered Mar 12 '14 at 09:55

2

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

answered Mar 12 '14 at 09:55

Bobby5193

1,585
1
13
23

How about the size problem i describe on my first post?Any idea? – Apostolos Mar 12 '14 at 10:02
overflow: hidden; on the css-form-pane would achieve the same result without the extra markup. http://jsfiddle.net/Lnrvd/1/ – nickspiel Mar 12 '14 at 10:03
I didn't understand exactly what you meant with the `width:500px` size. Are you trying to set a bigger width on the form ? – Bobby5193 Mar 12 '14 at 10:14
no as i said my form-group is total of 328x20 but when i set my form-pane's width at 500px the inputs go under the labels, like there is no more room. Must i set the form's width explicitely. Shouldn't it take as much as the form-pane gives her? – Apostolos Mar 12 '14 at 10:32
here's another fiddle : http://jsfiddle.net/rmmE4/6/ . I removed the clear from the css-form-group, and increased the size of css-col-3 to 40%. Is this what you are looking for ? – Bobby5193 Mar 12 '14 at 10:59

div not applying on whole form

1 Answers1