CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
RP McMurphy
RP McMurphy

Reputation: 744

Bootstrap 3 side by side two 50% width divs

I have been trying to accomplish this for the last two days. Plz somebody help. I am trying to divide the page in half. The left side 100% height and the right side just scroll with more content. Why is the right side collapsing on top of the left side? How to solve this riddle in Bootstrap 3? Here is my code:

<section id="main-body" class="container-fixed main-body">
        <div class="row text-center">
            <div class="col-md-6 left-side-home-outer">
                Left Side Content
           </div>

            <div class="col-md-6 right-side-home">
                Right Side Content
            </div>
        </div>
</section>

.left-side-home-outer {
border: 1px solid blue;
height: 100%;
position: fixed;
font-family: "Roboto";
font-weight: 800;
}

.right-side-home-outer {

border: 1px solid blue;
height: 100%;
width: 50%;
overflow: auto;
font-family: "Roboto";
font-weight: 800;
}

And if possible, if I want to add a footer fixed to the bottom of the left side, what would be the CSS? Thanks a lot.

Upvotes: 0

Views: 2189

Answers (2)

Mary Kelly
Mary Kelly

Reputation: 46

You don't need to have fixed positioning, in fact, you shouldn't. Also, you don't need the 50% width in your classes. Here, try this.... I couldn't get it to respond in a fiddle, but it worked in a local file I ran (is what is copied below).

<style>
.left-side-home-outer {
border: 1px solid blue;
height: 100%;
font-family: "Roboto";
font-weight: 800;
}

.right-side-home-outer {

border: 1px solid blue;
height: 100%;
overflow: auto;
font-family: "Roboto";
font-weight: 800;
}

</style>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">


<section id="main-body" class="container-fixed main-body">
        <div class="row text-center">
            <div class="col-md-6 left-side-home-outer">
                Left Side Content
           </div>

            <div class="col-md-6 right-side-home-outer">
                Right Side Content
            </div>
        </div>
</section>


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

Upvotes: 0

Moid
Moid

Reputation: 1447

There is no need for position: fixed.. that is what causing overlapping of content.

Also width:50% is also redundant..as it already a col-md-6..a 50% width column.

<section id="main-body" class="container-fixed main-body">
        <div class="row text-center">
            <div class="col-md-6 left-side-home-outer">
                Left Side Content
           </div>

            <div class="col-md-6 right-side-home">
                Right Side Content
            </div>
        </div>
</section>

.left-side-home-outer {
border: 1px solid blue;
height: 100%;
font-family: "Roboto";
font-weight: 800;
}

.right-side-home-outer {

border: 1px solid blue;
height: 100%;
overflow: auto;
font-family: "Roboto";
font-weight: 800;
}

Upvotes: 2

Related Questions