CODEWITHSUNDEEP
htmlcss
user3117275
user3117275

Reputation: 367

Footer not at the bottom

For this site, the footer area jumped up the page http://lainjurylaw.wpengine.com/. It's supposed to look like this: https://sandiegolawcenter.net/. All I did was change the hero image and the footer now moved up to right underneath top area.

I tried doing a clear:both, but that didn't help.

HTML:

<div id="full-width-footer">
    <div class="container">
        <div class="footer">
            <div class="footer-left">
                <div itemtype="http://schema.org/Attorney" itemscope="">
<span class="ozols" itemprop="name">San Diego Criminal Law Center</span>
<div itemtype="http://schema.org/PostalAddress" itemscope="" itemprop="address">
<span itemprop="streetAddress">1230 Columbia Street Suite 565A</span><br/>
<span itemprop="addressLocality">San Diego</span>
,
<span itemprop="addressRegion">CA</span>
<span itemprop="postalCode">92101</span>
</div>
<span itemprop="telephone">(619) 525-7006</span>
</div>
Los Angeles Accident Law Center © 2017. All Rights Reserved.
            </div>
            <div class="footer-right">

CSS:

#full-width-footer {
    border-top: 6px solid #248bbe;
    padding-bottom: 120px;
    background: #2a2a2a none repeat scroll 0 0;
}

Upvotes: 0

Views: 45

Answers (2)

Caedmon
Caedmon

Reputation: 687

The problem is you've not cleared the columns div, your current code:

<div class="columns">
  <div class="content">
    ... your content ...
  </div>
  <div class="sidebar">
    ... your content ...
  </div>
</div>

just add <div style="clear:both"></div> after the sidebar div and it works fine:

<div class="columns">
  <div class="content">
    ... your content ...
  </div>
  <div class="sidebar">
    ... your content ...
  </div>
  <div style="clear:both"></div>
</div>

Upvotes: 1

Mikhail Katrin
Mikhail Katrin

Reputation: 2384

Fix your fotter at the bottom of the page.

#full-width-footer {
    border-top: 6px solid #248bbe;
    padding-bottom: 120px;
    background: #2a2a2a none repeat scroll 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}
<div id="full-width-footer">
    <div class="container">
        <div class="footer">
            <div class="footer-left">
                <div itemtype="http://schema.org/Attorney" itemscope="">
                  <span class="ozols" itemprop="name">San Diego Criminal Law Center</span>
                  <div itemtype="http://schema.org/PostalAddress" itemscope="" itemprop="address">
                  <span itemprop="streetAddress">1230 Columbia Street Suite 565A</span><br/>
                  <span itemprop="addressLocality">San Diego</span>
                    ,
                  <span itemprop="addressRegion">CA</span>
                  <span itemprop="postalCode">92101</span>
              </div>
              <span itemprop="telephone">(619) 525-7006</span>
        </div>
        Los Angeles Accident Law Center © 2017. All Rights Reserved.
      </div>
    <div class="footer-right">

Upvotes: 0

Related Questions