Html – the best way to put the logo into the footer of every website I make

csshtmlxhtml

What is the best method to put my company logo with a link at the end of the footer in every website which I make (if the client allows me)?

First, I would host the logo image on my site. What would then be the best method in xhtml and css for me to put in my logo?

Best Solution

Include a javascript from your server to add this. That way, you can modify it in the future if you need to without having to touch your client files. Of course, this won't get you an notoriety with people browsing while having javascript disabled.

    <script type="text/javascript" href="http://mysite.com/siteby.js"></script>
  </body>
</html>

siteby.js would exist on your server. It would have something similar to the following:

// Create a link
var link = document.createElement("a");
link.setAttribute("href", "http://mysite.com");
link.innerHTML = "Site by Jonathan Sampson";

// Add it to the body
document.body.appendChild(link);

Just be sure that whatever you place in this script is efficient, and quick, and that your server delivers it with haste.

2015 update: the flexbox approach

There are two other answers briefly mentioning flexbox; however, that was more than two years ago, and they don't provide any examples. The specification for flexbox has definitely settled now.

Note: Though CSS Flexible Boxes Layout specification is at the Candidate Recommendation stage, not all browsers have implemented it. WebKit implementation must be prefixed with -webkit-; Internet Explorer implements an old version of the spec, prefixed with -ms-; Opera 12.10 implements the latest version of the spec, unprefixed. See the compatibility table on each property for an up-to-date compatibility status.

(taken from https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)

All major browsers and IE11+ support Flexbox. For IE 10 or older, you can use the FlexieJS shim.

To check current support you can also see here: http://caniuse.com/#feat=flexbox

Working example

With flexbox you can easily switch between any of your rows or columns either having fixed dimensions, content-sized dimensions or remaining-space dimensions. In my example I have set the header to snap to its content (as per the OPs question), I've added a footer to show how to add a fixed-height region and then set the content area to fill up the remaining space.

html,
body {
  height: 100%;
  margin: 0;
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.box .row {
  border: 1px dotted grey;
}

.box .row.header {
  flex: 0 1 auto;
  /* The above is shorthand for:
  flex-grow: 0,
  flex-shrink: 1,
  flex-basis: auto
  */
}

.box .row.content {
  flex: 1 1 auto;
}

.box .row.footer {
  flex: 0 1 40px;
}

<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->

<div class="box">
  <div class="row header">
    <p><b>header</b>
      <br />
      <br />(sized to content)</p>
  </div>
  <div class="row content">
    <p>
      <b>content</b>
      (fills remaining space)
    </p>
  </div>
  <div class="row footer">
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>

In the CSS above, the flex property shorthands the flex-grow, flex-shrink, and flex-basis properties to establish the flexibility of the flex items. Mozilla has a good introduction to the flexible boxes model.

CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page

A simple method is to make the body 100% of your page, with a min-height of 100% too. This works fine if the height of your footer does not change.

Give the footer a negative margin-top:

footer {
    clear: both;
    position: relative;
    height: 200px;
    margin-top: -200px;
}

Best Solution

Related Solutions

Html – Make a div fill the height of the remaining screen space

2015 update: the flexbox approach

Working example

CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page

Related Question