CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
zakaria mouqcit
zakaria mouqcit

Reputation: 403

Bootstrap rows overlapping

I have an issue. I'm trying to make bootstrap grid system with 4 rows, but the problem some rows are overlapped. I don't know from where comes this problem. this fiddle shows my issue 

html, body{
    width: 100% !important;
    height: 100% !important;
    padding:0;
    position: relative;
  }
  #header-sec{
    position: absolute;
    /*top: 0;*/
    width: 100%;
    background-color: green;
    height : 15%;
    min-height: 30px;
  }
  #footer-sec{
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: black;
    height : 5%;


  }
  #data-viewer{
    height : 60%;

  }
  #zone-geog{
    height : 20%;

  }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
    <div class="container-fluid">
    <div id="header-sec" class="row">
        <div class="col-sm-12">header</div>
    </div>
    <div id="zone-geog" class="row">
      <div class="col-sm-12">
        zone geog
      </div>
    </div>
    <div id="data-viewer" class="row bg-primary">
        <div class="col-sm-9">map</div>
        <div class="col-sm-3">idica evolu</div>
    </div>
    <div id="footer-sec" class="row">
        <div class="col-sm-12">footer</div>
    </div>

    </div>
  </body>

if you have any ideas please help me solve this issue.

Upvotes: 4

Views: 14527

Answers (1)

Avihay m
Avihay m

Reputation: 551

You need to remove position: absolute

html, body{
    width: 100% !important;
    height: 100% !important;
    padding:0;
    position: relative;
  }
  #header-sec{
    width: 100%;
    background-color: green !important;
    height : 15%;
    min-height: 30px;
  }
  #footer-sec{
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: black;
    height : 5%;


  }
  #data-viewer{
    height : 60%;

  }
  #zone-geog{
    height : 20%;

  }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
    <div class="container-fluid">
    <div id="header-sec" class="row">
        <div class="col-sm-12">header</div>
    </div>
    <div id="zone-geog" class="row">
      <div class="col-sm-12">
        zone geog
      </div>
    </div>
    <div id="data-viewer" class="row bg-primary">
        <div class="col-sm-9">map</div>
        <div class="col-sm-3">idica evolu</div>
    </div>
    <div id="footer-sec" class="row">
        <div class="col-sm-12">footer</div>
    </div>

    </div>
  </body>

Upvotes: 7

Related Questions