CODEWITHSUNDEEP
twitter-bootstrapcss-float
laggingreflex
laggingreflex

Reputation: 34627

bootstrap panel overlaps floats

I have a simple side panel that floats to the left and a main container that is a bootstrap "panel". The bootstrap panel's borders overlap into my side-panel.

http://fiddlesalad.com/jade/bootstrap-panel-float/

aside { width: 100px; float: left; }
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<aside>lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem</aside>
<div class="panel panel-default panel-group container-fluid">
  <div class="panel panel-default">ipsum ipsum ipsum ipsum ipsum ipsum ipsum ipsum</div>
  <div class="panel panel-default">ipsum ipsum ipsum ipsum ipsum ipsum ipsum ipsum</div>
  <div class="panel panel-default">ipsum ipsum ipsum ipsum ipsum ipsum ipsum ipsum</div>
  <div class="panel panel-default">ipsum ipsum ipsum ipsum ipsum ipsum ipsum ipsum</div>
</div>

How to make them separated so they don't overlap?

Upvotes: 0

Views: 3222

Answers (2)

Christina
Christina

Reputation: 34652

You have to either write your own css to give elements width and display settings or you learn the grid system.

Learn basic CSS and html before using a framework, it will save a lot of pain.

The grid is 100/12 = each row is 12 columns. The xs class is from 0 - up viewport sizes. You can change this to col-sm-X and it will be from 768px and up. Getbootstrap.com and many, many other sources on how to use the Bootstrap 3 grid. 

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <aside class="col-xs-3">lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem</aside>

    <div class="col-xs-9">
      <div class="panel panel-default panel-group">
        <div class="panel panel-default">ipsum ipsum ipsum ipsum ipsum ipsum ipsum ipsum</div>
        <div class="panel panel-default">ipsum ipsum ipsum ipsum ipsum ipsum ipsum ipsum</div>
        <div class="panel panel-default">ipsum ipsum ipsum ipsum ipsum ipsum ipsum ipsum</div>
        <div class="panel panel-default">ipsum ipsum ipsum ipsum ipsum ipsum ipsum ipsum</div>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Pau
Pau

Reputation: 538

That's because aside's width is set to 100px. Put a proper width like so:

aside {
   width: 100%;
}

.panel-default {
   clear: both;
}

Upvotes: 0

Related Questions