Why hidden input is affecting my layout? LF Explanation

Question

I needed to use an hidden input to transfer some IDs to the page for each block.. whatever.

I have the following code :

<div id="shipping_box" class="formSep well">
    <div id="default_shipping_box" class="shipping_box row-fluid">
        <div class="span1">
            <input type="hidden" name="tracking_id" value="" />
        </div>
    </div>
</div>

This code work well and the result is what I expected.

If I do this :

<div id="shipping_box" class="formSep well">
    <div id="default_shipping_box" class="shipping_box row-fluid">
        <input type="hidden" name="tracking_id" value="" />
        <div class="span1">

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

The layout is not respected. See this picture for the demostration :

Can someone explain why to me ? Hidden input aren't suppose to be "hidden" so they shouldn't affect the layout ?

jsfiddle : http://jsfiddle.net/t9M3C/

Near line 285

Answer 1

Is because you have a css rule (in bootstrap.min.css file) that match the firs-child element (but only if has a class*="span") inside the default_shipping_box div.

.row-fluid [class*="span"]:first-child {
margin-left: 0;
}

So, if you put your hidden input inside the div#default_shipping_box and before the first span, then that rule is not styling the div.span1 and thats why your template is been afected.

You can fixed adding a simple css rule to the same file...

.row-fluid .span1{margin-left:0 !important;}

The important, is because you have more files who overite this rule (ex. in bootstrap-responsive.min.css)

Good luck, and i hope it helps cheers, Gmo.-

EDIT: Too slow XD. Answered while writing ... I agree with the reason explained above.