Wrapper div around .col no height?

Question

I'm both using Bootstrap 3 and trying to modularize my styles like this: (the empty <span>s are generated by React, don't know how to get rid of them...)

html

<div class="row">
    <span></span>
    <div class="Module">
        <span></span>
        <div class="col-xs-3">
            <span></span>
            <div class="thumbnail-wrapper">
                <span><img alt="My something" class="img-thumbnail" src="/static/media/avatar.96308863.png"></span>
                <div class="img-thumbnail-close-btn hidden">
                    <span><span class="fa-stack fa-1x"><i class="fa fa-circle fa-stack-2x white-background"></i><i class="fa fa-circle-thin fa-stack-2x black-border"></i><i class="fa fa-times fa-stack-1x"></i></span></span>
                </div>
            </div>
        </div>
    </div>
</div>

Module has no height but col-xs-* and row does.

• Why?
• And how can I give Module full height?

Answer 1

.Module doesn't have any height because the .col- classes are floated in Bootstrap 3. When an item is floated it is taken out of the normal document flow and doesn't take up space. If .col- don't take up space then .Module has no height. .row has height because it has a built in clearfix that clears the floats of .col- .

To fix this you can add overflow: hidden; to .Module to clear the floats or use a clearfix .

You might also want to consider moving .Module to the .row element depending on the styles your applying, ie background-color .

Uncleared Floats

 @import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' ); .Module { background-color: gold; } 

 <div class="row"> <div class="Module"> <div class="col-xs-6"> Some content here </div> <div class="col-xs-6"> Some content here </div> </div> </div> 

Cleared Floats

 @import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' ); .Module { background-color: gold; overflow: hidden; } 

 <div class="row"> <div class="Module"> <div class="col-xs-6"> Some content here </div> <div class="col-xs-6"> Some content here </div> </div> </div> 

Answer 2

just use clear:both before closing .module div,

<div class="row">
    <div class="Module">
        <div class="col-xs-6">Some content here</div>

        <div class="col-xs-6">Some content here</div>
        <div style="clear:both"></div>
       </div>
</div>

Answer 3

If the goal is to "give .Module full height", any containers of .Module must be full height too.

body, html {
    height: 100%;
}

.container, .row {
    height: 100%;
}

.Module {
    background: gold;
    min-height: 100%;
}

http://www.codeply.com/go/k72NcpVATe