Stretch Text to Fit Width of Div

div to only be as wide as the text inside, not stretch to the end

The <footer-1> tag is invalid markup and should be replaced with <footer class="footer-1">Get a quote </footer> then modify your css to use .footer-1

As others have stated use the inline-block to make it display to width auto

You can read more about the display css here

#footer-right{ float:left; width:360px; height:200px; background:#96F;}.footer-text-section-wrap{ background:#f0f; width:auto;    display:inline-block; height:auto;}.footer-1{ color:#333; font-weight:100; font-family:verdana,arial,"Times New Roman", Times, serif,georgia,serif,helvetica; font-size:20px; border-bottom:1px solid #ccc; padding:0 0 10px 0px;}

<div id="footer-right"><div class="footer-text-section-wrap"><footer class="footer-1">Get a Quote</footer></div></div>

How to stretch text to occupy full height and width

Bit of a horrible answer but it's the only way I can think of doing it. You'd need to add a container and then use the scale transform

.container {
  -ms-transform: scale(1.87, 1.16);
    -webkit-transform: scale(1.87, 1.16);
    transform: scale(1.87, 1.16);
    margin-left: 91px;
    margin-top: 2px;
}

full method below

http://jsbin.com/fiqixudamo/1/edit?html,css,js,output

How to have a text stretch on to the width of div and stay in one line always, for email newsletter

You can apply white-space to your #headerTop element:

#headerTop {
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    text-overflow: ellipsis;
}

Fiddle

How to stretch a single word across a div container?

Unfortunately the promising-looking text-justify is not yet implemented fully on most browsers (and may not be).

text-align however is supported in most browsers and text-align-last which tells the browser to justify the last line even if it is short, is supported in many of the main browsers. But not Safari sadly, so we introduce a bit of a hack - force the thing to look full width by adding a pseudo element.

I can't see a way of just having a single word justified this way, but you can put spaces between each character, thus avoiding the need for extra elements:

* {
  margin: 0;
  padding: 0;
}
div {
  width: 100vw;
  text-align: justify;
  text-align-last: justify;
}
div::after{ /* hack added for Safari */
   content: "";
   display: inline-block;
   width: 100%;
}

<div>W O R D </div>

Auto-size dynamic text to fill fixed size container

Thanks Attack. I wanted to use jQuery.

You pointed me in the right direction, and this is what I ended up with:

Here is a link to the plugin: https://plugins.jquery.com/textfill/

And a link to the source: http://jquery-textfill.github.io/

;(function($) {
    $.fn.textfill = function(options) {
        var fontSize = options.maxFontPixels;
        var ourText = $('span:visible:first', this);
        var maxHeight = $(this).height();
        var maxWidth = $(this).width();
        var textHeight;
        var textWidth;
        do {
            ourText.css('font-size', fontSize);
            textHeight = ourText.height();
            textWidth = ourText.width();
            fontSize = fontSize - 1;
        } while ((textHeight > maxHeight || textWidth > maxWidth) && fontSize > 3);
        return this;
    }
})(jQuery);

$(document).ready(function() {
    $('.jtextfill').textfill({ maxFontPixels: 36 });
});

and my html is like this

<div class='jtextfill' style='width:100px;height:50px;'>
    <span>My Text Here</span>
</div>

This is my first jquery plugin, so it's probably not as good as it should be. Pointers are certainly welcome.