0

I'm trying to keep my footer down no matter the size of the page. But it gets thrown about when about div encroaches. I want it to display over the about content but for the about content to be scrollable it's too big to display. Here's the code

fiddle

.footer {
background-color:#FFF;
width: 100%;
border-top: 1px solid #ccc;
padding-top: 1em;
height: 140px; 
display: block;

.about {
font-family: HindMedium;
font-size: 13px;
min-width: 800px;
text-align: left;
width:100%;
min-height: 100%;
margin-bottom: -140px; 
    }
Nathaniel McMahon
  • 1
  • 3

4 Answers4

0

You need to clear the float. Add clear:both; to the .footer.

(function() {

  var img = document.getElementById('container').firstChild;
  img.onload = function() {
    if (img.height > img.width) {
      img.height = '100%';
      img.width = 'auto';
    }
  };

}());
* {
  margin: 0;
}

html,
body {
  height: 100%;
}

.footer,
{
  height: 140px;
  display: block;
}

p {
  font-family: HindRegular;
  font-size: 13px;
  font-weight: normal;
  display: block;
  margin-top: 1.5em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
}

.article {
  float: left;
  font-family: HindRegular;
  width: 21%;
  padding-right: 4%;
  color: #999;
}

.article-right {
  float: left;
  font-family: HindRegular;
  width: 21%;
  padding-left: 4%;
  color: #999;
}

.article-centre {
  float: left;
  font-family: HindRegular;
  width: 21%;
  padding-left: 2%;
  padding-right: 2%;
  color: #999;
}

.blurb {
  font-family: HindMedium;
  font-size: 24px;
  padding-bottom: 100px;
  color: #999;
}

.about {
  font-family: HindMedium;
  font-size: 13px;
  min-width: 800px;
  text-align: left;
  width: 100%;
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -140px;
}

.heading {
  font-family: HindMedium;
  font-size: 24px;
  color: #666;
  margin-top: 1em;
}

.copyright {
  float: left;
}

.contact {
  float: right;
  font-family: HindRegular;
  color: #999;
}

#container {
  width: 100%;
}

#container img {
  width: 100%;
}

h8 {
  font-family: HindRegular;
  color: #999;
  padding-right: 5px;
  font-style: normal;
}

.footer {
  clear: both;
  background-color: #FFF;
  height: 120px;
  width: 100%;
  border-top: 1px solid #ccc;
  padding-top: 1em;
}

a {
  border-bottom: 1px solid #219edf;
  padding: 0;
  margin: 0 0 2px 0;
  clear: both;
  color: #666;
  text-decoration: none;
  font-weight: normal;
  outline: none;
  transition: all .15s ease;
}

.services {
  width: 100%;
}

a:hover {
  text-decoration: none;
  color: #999;
  border-bottom: 1px solid #999;
}

#details {
  color: #666
}

#header {
  color: #999;
}
<div class="about">
  <div class="blurb">Stunning Imagery and resourceful imaging
  </div>

  <div class="article">
    <div id="container">
      <img src="http://www.nathanielmcmahon.com/assets/images/about_page/OMA%20cctv%20building_.jpg" alt="CCTV building in Beijing By Rem Koolhaas's OMA" />
    </div>
    <div class="heading">Architectural Photography
    </div>
    <p>Since 2011 Nathaniel has been scaling China's highs and lows documenting it's varied architectural manifestations for a range of western and Local clients. Often a lone cameraman amongst a sea of Chinese hard hats, part of the job has been to negotiate
      sites with little more than a grid reference and reference pictures in inhospitable new cities on the fringes of boom or bust development. Scrambling his way up a half finished sky scrapper fire escapes with little more than a telephone number and
      the name of a contractor called Zhou. In the summer of 2017 he relocated to London. He looks forward to shooting a very different type of architecture back home.
    </p>
  </div>
  <div class="article">
    <div id="container">
      <img src="http://www.nathanielmcmahon.com/assets/images/about_page/Aerial_drone_photography-.jpg" alt="Aerial Photography with UAV drone" />
    </div>
    <div class="heading"> Aerial Services
    </div>
    <p>Large range of services utilizing our fleet of custom built UAS (Unmanned Aerial Systems - AKA drones)</p>
    <p>Registered CAA pilot with commercial flight permissons</p>
    <p>Up to High resolution stills at 42mp and rich 4k full frame video</p>
    <p>Photogrametry - Developing accurately positioned 3D site models up to a 10cm level accuracy</p>
    <p>Agronomy - Crop analysis, multispectral imaging</p>
    <p>&nbsp;</p>

  </div>
  <div class="article-centre">
    <div id="container">
      <img src="http://www.nathanielmcmahon.com/assets/images/about_page/blank.jpg" alt="Verified View image of existing site with proposed building outline." />
    </div>
    <div class="heading">Verified Views
    </div>
    <p>We provide AVR's (Accurate Visual Representations) aka verified views to back up your project proposals with accurate siting in the current landscape.</p>
    <p>We don't outsource the photography or site survey whole process is in house</p>
    <p>Levels of representation from AVR0 - outlining of proposed project to AVR3 - description of architectural form and materials.</p>
  </div>
  <div class="article-right">

    <div id="container">
      <img src="http://www.nathanielmcmahon.com/assets/images/about_page/Rhizome_logo_square.jpg" alt="Architectural Services by Rhizome" />
    </div>
    <div class="heading">Rhizome
    </div>
    <P>Company started in London 2017 to explore and provide bespoke services to small and mid sized architectural firms and developers utilsing emerging technologies in architectural and related fields.</P>
    <P>Comming Soon</P>


  </div>


  <br style="clear: left;" />


</div>
<footer class="footer">

  <div class="article"><span id="header">Contact Details</span>
  </div>
  <div class="article">
    <span id="header">Address</span>
    <br /><span id="details">Nathaniel McMahon Photography<br />
      Maynards Farmhouse<br />
      A21, Lamberhurst QTR<br />
      Kent<br />
      TN3 8AL</span>
  </div>

  <div class="article-centre">
    <span id="header">Mobile</span>&nbsp;&nbsp;&nbsp; <span>+44 (0)7377673765
        </span><br/>
    <span id="header">Email &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
    <a href="mailto:nathaniel.mcmahon@gmail.com" target="blank">                   nathaniel.mcmahon@gmail.com</a>
  </div>

  <div class="article-right"> Website and all images <br /><span id="details">© 2017 Nathaniel McMahon Photography</span>
  </div>
</footer>
Berdesdan
  • 359
  • 1
  • 5
  • 12
  • Thanks @berdesdan I gave up and employed someone to do it but that ended up being more difficult and with worse results. So... – Nathaniel McMahon Apr 18 '18 at 12:33
  • Problem 1: the footer won't float over the about DIV so on smaller screens it gets pushed out of the window. (the window is scrollable so it's there if you scroll down but i need it to be always there "sticky" and the rest of the page/about div scrollable. – Nathaniel McMahon Apr 18 '18 at 12:42
  • Problem 2: This code is intended to be inserted into a larger website in a backend html input box. I don't think the footer is going to behave correctly. I want it to treat the container it is in as the browser window. – Nathaniel McMahon Apr 18 '18 at 12:45
  • Problem 3: i don't want it to interfere with other css on the site I'll be making it all inline, any problems with this? – Nathaniel McMahon Apr 18 '18 at 12:50
0

Remove these from your .about class. You should practice some with margin. It doesn't work the way you're trying to use it.

min-height: 100%;  
margin-bottom: -140px;

Add clear:both; to your footer declaration.

Also change your body style from height to min-height, so that your body can be larger than the browser.

N-ate
  • 6,051
  • 2
  • 40
  • 48
  • Yep thanks, the clear:both has got them working better although the height and margin are still necessary to get the footer at all. I've updated the fiddle https://jsfiddle.net/wildtypitch/a197oddw/ but have an issue with the footer background being transparent – Nathaniel McMahon Nov 30 '17 at 20:44
0

You can use overflow: hidden on .about and .footer so the floats will stay contained within those containers. You don't need the negative margin on the .about. If you are trying to make the footer stay at the bottom of the page even when the content is very little, you could try positioning the footer absolutely. Here's an example below. You'll need to wrap everything in .wrapper or whatever name you want to use.

.wrapper { min-height: 100%; position: relative; }
.article { overflow: hidden; }
.footer { overflow: hidden; position: absolute; bottom: 0; }

With less content, footer is at the bottom: https://jsfiddle.net/suefeng/u4coohpp/1/

With more content, footer is still at the bottom: https://jsfiddle.net/suefeng/u4coohpp/3/

If you want elements to stick out of the .article and .footer containers, or just another option, here's an alternative solution to clearing floats: You could remove floats on your article and footer containers, but use display: inline-block; with vertical-align: top; instead. You'll need * { box-sizing: border-box; } or change your padding into margin.

https://jsfiddle.net/suefeng/u4coohpp/4/

Also added this to the footer so the email address wouldn't run into the next column:

.footer a[href*="mailto"] {
    word-break: break-all;
}

Here's an example of having a fixed footer: https://jsfiddle.net/suefeng/gv7Lg3e0/1/

.footer {
    position: fixed;
    bottom: 0;
}
Sue
  • 378
  • 1
  • 12
  • Thanks for the href suggestion although it doesn't seem to work in iexplorer (fine in Chrome) – Nathaniel McMahon Nov 30 '17 at 20:18
  • Also wanted the footer to be always in the browser at the bottom, I think your suggestions place them at the bottom of the page. I've updated the fiddle here https://jsfiddle.net/wildtypitch/a197oddw/ but have issue with transparency – Nathaniel McMahon Nov 30 '17 at 20:48
  • You could use display: inline-block; or display: block; for the email and have it display on the next line. That should work for the word-break not working in IE. – Sue Nov 30 '17 at 20:48
  • @NathanielMcMahon Do you mean you want the footer to be sticky and always show up in the window at the bottom as the user scrolls? – Sue Nov 30 '17 at 20:49
  • Here's more you can try with the word-break https://stackoverflow.com/questions/8394685/css-word-wrap-break-word-dont-work-on-ie9 – Sue Nov 30 '17 at 20:51
  • Just updated my post to include an example with a fixed footer. – Sue Nov 30 '17 at 20:56
0

If you are simply trying to pin an element to stay at the bottom of the page and have content scroll under it. You should use position:fixed.

If you update your footer content like so:

.footer {
  background-color: #FFF;
  border-top: 1px solid #ccc;
  padding-top: 1em;
  height: 140px;
  display: block;
  overflow: hidden;
  position: fixed;
  left:0;
  right:0;
  bottom:0;
  clear:both;
}

The footer will pin to the bottom. You will also need a spacer after your footer to ensure your scroll bar is sufficient to scroll all content into view.

HTML:

<div class='footer-spacer'></div>

CSS:

.footer-spacer {
    height: 160px;
}

Remove these from your .about class. Negative margins will cause odd behavior when it moves an element off page. 

min-height: 100%;  
margin-bottom: -140px;
N-ate
  • 6,051
  • 2
  • 40
  • 48
  • 1
    Thanks N-ate , works beautifully but.. it's a little more complicated than I've explained. This code is placed in a div at the bottom of a three page scrolling page. so the footer should only appear at the bottom of it's container div (the bottom page) not the browser. Sorry it's rather difficult to explain you can see it here [link] (http://www.nathanielmcmahon.com). but you've given me enough to be playing with, I'll feel my way around and see. Cheers – Nathaniel McMahon Dec 01 '17 at 16:23