CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
obsquletaner
obsquletaner

Reputation: 3

CSS: Border-top won't work properly

I'm using Bootstrap and I'm trying to fix the border. It will only appear above the text because of the pull right and left. What should I do to make it appear over the whole line?

HTML

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="pull-left">
          <footer class="footer"><p>text1</p></footer>
        </div>
        </div>
    <div class="col-md-6">
      <div class="pull-right">
         <footer class="footer"><p>text2</p></footer>
      </div>
    </div>
  </div>
</div>

CSS

.footer {
    padding-top: 19px;
    margin-top: 7px;
    color: #777;
    border-top: 1px solid #e5e5e5;
}

Upvotes: 0

Views: 167

Answers (3)

George
George

Reputation: 36784

You can't without changing your markup.

It makes more sense to give your footer row another fitting class: footer-row and apply styles to that instead:

HTML

<div class="container">
  <div class="row footer-row">
    <div class="col-md-6">
      <div class="pull-left">
          <footer class="footer"><p>text1</p></footer>
        </div>
        </div>
    <div class="col-md-6">
      <div class="pull-right">
         <footer class="footer"><p>text2</p></footer>
      </div>
    </div>
  </div>
</div>

CSS

.footer-row {
    padding-top: 19px;
    margin-top: 7px;
    color: #777;
    border-top: 1px solid #e5e5e5;
}

Bootply

Upvotes: 1

Devin
Devin

Reputation: 7720

Change your code like this:

<footer class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="pull-left">
          <p>text1</p>
        </div>
        </div>
    <div class="col-md-6">
      <div class="pull-right">
        <p>text2</p>
      </div>
    </div>
  </div>
</footer>

Basically, you get rid of your double footer element and apply the container class to the footer element so it expands the whole width and remains as a single footer when resized

This solves your issue AND is semantically correct since you won't have 2 footer elements

I have added a Bootply so you can see how it works

Upvotes: 1

Julian Veling
Julian Veling

Reputation: 357

If indeed you want text 1 and text two to take up half of the div each, try putting the footer tag as a whole across all columns as one element, then text one and text 2 nested in two divs with columns of 6.

Upvotes: 0

Related Questions