CSS HTML Bootstrap layout issue

Question

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/

yes i changed that to a custom css since bootsrap did not seem to work. the 'roww' clas is defined in the css if you look at the jsfiddle — Rookie
– Rookie, Commented Jun 2, 2015 at 21:38
I don't think you are using bootstrap properly. If you're resorting to "custom" classes to replace bootstrap classes like "roww" and "coll-md-2" then you need to re-think your approach. — mason81
– mason81, Commented Jun 2, 2015 at 21:45
yes i dont want to take that approach either, if you comment on what can i do with the fiddle to get this working with bootsrap, i have tried and tried...sigh... — Rookie
– Rookie, Commented Jun 2, 2015 at 21:47
Example: you are using a fixed width on the menu (yet using a class with a 15% width on it's container/parent). This is part of your problem. You could "fix" your overlap issue by adding a fixed width of 280px (the width of your menu currently) to the parent container: <div class="coll-md-2 no-float" style="width:280px"> but I do not recommend this as a solution. — mason81
– mason81, Commented Jun 2, 2015 at 21:47

technoY2K · Accepted Answer · 2015-06-02 21:45:24Z

2

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

edited Jun 2, 2015 at 21:45

answered Jun 2, 2015 at 21:37

technoY2K

2,5901 gold badge28 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Rookie Over a year ago

i tried the above approach and the content still overflows into the left menu

technoY2K Over a year ago

did you remove the fixed widths in your css?

technoY2K Over a year ago

let bootstrap handle the widths, they got it down so you dont have to

Rookie Over a year ago

i cleared everything else, and it seems to work. but now both the columns are at the center of the page with some padding on left and right. how do i move the menu to the leftmost end and let the form flow to the right side? i tried using this for the 2 rows: col-md-2 and col-md-10 but layout gets messed up for those again.. only col-6 works fine but they have padding to left and right

technoY2K Over a year ago

instead of container use container-fluid

|

Collectives™ on Stack Overflow

CSS HTML Bootstrap layout issue

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related