CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
Rookie
Rookie

Reputation: 5467

CSS HTML Bootstrap layout issue

I'm trying to build a page with 2 full height columns. the left column is for a menu. The right section will hold a form. I'm trying to make this a responsive page by using Bootstrap. I have written the following code, but when I resize the window, the form content overflows into the left menu. I tried using Bootstrap grid, but then ended up using my own CSS. This still won't work.

I created a jsfiddle here: https://jsfiddle.net/snehilw/8zrkcyyx/

My current layout looks like this:

<div class="containerr">
  <div class="roww">
    <!-- Left Navigation Menu  -->
    <div class="coll-md-2 no-float">
      <div class="nav-side-menu">
        <div class="brand"> &nbsp</div>
        <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
        <div class="menu-list">
          <ul id="menu-content" class="menu-content collapse out">
            <li>
              <a href="#">
              <i class="fa fa-dashboard fa-lg"></i>Scenario Builder <span class="badge badge-right">3</span>
              </a>
            </li>
            <li id= "addNewScenario">
              <a href="#">
              <i class="fa fa-lg"></i> <span class="glyphicon glyphicon-plus-sign"></span> Add New Scenario
              </a>
            </li>
            <li>
              <a href="#">
              <i class="fa fa-lg"></i><span class="glyphicon glyphicon-floppy-disk"></span> Save
              </a>
            </li>
            <li>
              <a href="#">
              <i class="fa fa-lg"></i><span class="glyphicon glyphicon-stats"></span> Test
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- FORM CONTENT -->
    <!-- End Form content-->
  </div>
</div>

Please advise on how to fix the form overflowing into the menu using Bootstrap or CSS.

jsfiddle link: https://jsfiddle.net/snehilw/8zrkcyyx/

Upvotes: 2

Views: 232

Answers (1)

technoY2K
technoY2K

Reputation: 2570

Twitter Bootstrap Solution

<div class="container">
  <div class="row">

    <div class="col-xs-6">
      html for menu
    </div>

    <div class="col-xs-6">
      html for form
    </div>

 </div>    
</div>

also if you want it to stack on smaller devices you could use col-sm-6 instead

Upvotes: 2

Related Questions