Search code examples
htmlcsstwitter-bootstrapclearfix

Bootstrap content doesn't lay out correctly in conjunction with fixed width sidebars

There is a large white gap between the first row of columns and the second row.

JSFiddle: https://jsfiddle.net/5o3ug26g/

<!DOCTYPE html>
<html>
<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .content {
            margin-left: 170px;
            margin-right: 170px;
        }

        .sidebar { width: 160px; height: 600px; }
        .left { float: left; background: forestgreen; }
        .right { float: right; background: steelblue; }
    </style>
</head>


<body>
    <div>
        <div class="left sidebar"></div>

        <div class="right sidebar"></div>

        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-6">Text on top of the page</div>
                    <div class="col-md-6">Other text on top of the page</div>
                </div>

                <div class="row">
                    <div class="col-md-6">I want this to be right below the "Text on top of the page" but it isn't...</div>
                    <div class="col-md-6">... and I want this to be right below the "Other text on top of the page" but it isn't</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

If I remove the row classes then the gap disappears, but this problem appears also when using Bootstrap navbar-s and other containers with :after { display: table; }, so just removing the row classes is not a solution.

I tried adding clearfix in a bunch of places but to no avail.

This is an extract from a more complex responsive layout and I'd rather avoid refactoring it all.

What is the easiest fix?

Solution

  • You can position your left and right sidebars absolutely instead of floating them. The floats are interfering with the bootstrap layout.

    .left { background: forestgreen; position:absolute; left:0; top:0; }
.right { background: steelblue; position:absolute; right:0; top:0;}

    Live example forked from yours: https://jsfiddle.net/5fk5900s/1/