CODEWITHSUNDEEP
htmlcss
GregH
GregH

Reputation: 5459

HTML border on div that is outside of the div with a border style

I am currently experiencing the below issue where I do not want the word Samples wrapped in a border, I would like it to say Samples (no border around it) with a <hr below it and then a list of divs below it that DOES have a border. I am not sure why Samples is being bordered here as it is outside of my bordered div. Note I am sure that there is no other bordered div wrapping this html. Screenshot and HTML below:

HTML:

<div class="col-md-12" style="margin-top: 75px">
        <h3 class="pull-left" style="font-size: 45px">Samples</h3>
    </div>
    <div class="col-md-12">
        <hr>
    </div>

    <div ng-controller="SamplesQueryController">
        <div style="border: 1px solid #000000">
            <div ng-repeat="item in data" style="margin-left: 14px">
                <a href="#/sample/{{item.id}}"
                    style="font-size: 34px; text-decoration: underline">{{item.name}}</a>
                <br> <span style="font-size: 20px">{{item.description}}</span><br>
                <hr>
            </div>
        </div>
    </div>

Upvotes: 0

Views: 83

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 105893

Behavior comes from bootstraps style. to avoid this, wrap each row inside a class="row" div

html {padding:2em; /*demo*/}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-md-12" style="margin-top: 75px">
    <h3 class="pull-left" style="font-size: 45px">Samples</h3>
  </div>
  <div class="col-md-12">
    <hr>
  </div>
</div>
<div class="row">
  <div ng-controller="SamplesQueryController">
    <div style="border: 1px solid #000000">
      <div ng-repeat="item in data" style="margin-left: 14px">
        <a href="#/sample/{{item.id}}" style="font-size: 34px; text-decoration: underline">{{item.name}}</a>
        <br> <span style="font-size: 20px">{{item.description}}</span><br>
        <hr>
      </div>
    </div>
  </div>
</div>

your html :

    html {padding:2em; /*demo*/}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-12" style="margin-top: 75px">
        <h3 class="pull-left" style="font-size: 45px">Samples</h3>
    </div>
    <div class="col-md-12">
        <hr>
    </div>
    <div ng-controller="SamplesQueryController">
        <div style="border: 1px solid #000000">
            <div ng-repeat="item in data" style="margin-left: 14px">
                <a href="#/sample/{{item.id}}"
                    style="font-size: 34px; text-decoration: underline">{{item.name}}</a>
                <br> <span style="font-size: 20px">{{item.description}}</span><br>
                <hr>
            </div>
        </div>
    </div>

Upvotes: 1

wgallop
wgallop

Reputation: 167

At first glance it seems like this might be a basic clearfix issue. I noticed you are using the bootstrap's "pull-left" helper class and adding a class of clearfix to the parent element should fix this. Documentation can be found here: http://getbootstrap.com/css/#helper-classes-clearfix

I'm not totally sure why you would need to float that title in the first place...maybe a better understanding of the bootstrap column system is required because that could be the root of your problems.

UPDATED ANSWER:

<div style="margin-top: 75px">
    <h3 style="font-size: 45px">Samples</h3>
</div>

http://codepen.io/wgallop99/pen/Myeppy

Removed pull-left class and col-md-12 fixed it partially but again, you may encounter more troubles down the line if you aren't utilizing the bootstrap column classes correctly.

Upvotes: 1

Related Questions