How to Style a Div to Have a Background Color for The Entire Width of The Content, and Not Just for The Width of The Display

How to style a div to have a background color for the entire width of the content, and not just for the width of the display?

black magic:

<style>
body { float:left;}
.success { background-color: #ccffcc;}
</style>

If anyone has a clear explanation of why this works, please comment. I think it has something to do with a side effect of the float that removes the constraint that the body must fit into the page width.

How do I set a background-color for the width of text, not the width of the entire element, using CSS?

Put the text in an inline element, such as a <span>.

<h1><span>The Last Will and Testament of Eric Jones</span></h1>

And then apply the background color on the inline element.

h1 {
    text-align: center; 
}
h1 span { 
    background-color: green; 
}

An inline element is as big as its contents is, so that should do it for you.

How do I make my background-color fill entire width of div when applied to a `ul li`?

Add this to your CSS file:

.ui-layout-pane-east {
    padding: 0 !important;
}

Don't do this from the browser's inspector. jQuery UI's inner workings are supposed to calculate widths on page load.

The background color isn't stretching the entire width of screen

Wrapping your container with the section will most likely fix the problem.

Instead of writing this;

<section class="about container py-5 my-5 mx-auto">

try this:

<section class="about py-5 my-5">
  <div class="container mx-auto">

You probably have a margin set around your container

Also your about styles should be set to width: 100%

CSS: Set a background color which is 50% of the width of the window

Older Browser Support

If older browser support is a must, so you can't go with multiple backgrounds or gradients, you're probably going to want to do something like this on a spare div element:

#background {
    position: fixed;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background-color: pink; 
}

Example: http://jsfiddle.net/PLfLW/1704/

The solution uses an extra fixed div that fills half the screen. Since it's fixed, it will remain in position even when your users scroll. You may have to fiddle with some z-indexes later, to make sure your other elements are above the background div, but it shouldn't be too complex.

If you have issues, just make sure the rest of your content has a z-index higher than the background element and you should be good to go.

Modern Browsers

If newer browsers are your only concern, there are a couple other methods you can use:

Linear Gradient:

This is definitely the easiest solution. You can use a linear-gradient in the background property of the body for a variety of effects.

body {
    height: 100%;
    background: linear-gradient(90deg, #FFC0CB 50%, #00FFFF 50%);
}

This causes a hard cutoff at 50% for each color, so there isn't a "gradient" as the name implies. Try experimenting with the "50%" piece of the style to see the different effects you can achieve.

Example: http://jsfiddle.net/v14m59pq/2/

Multiple Backgrounds with background-size:

You can apply a background color to the html element, and then apply a background-image to the body element and use the background-size property to set it to 50% of the page width. This results in a similar effect, though would really only be used over gradients if you happen to be using an image or two.

html {
    height: 100%;
    background-color: cyan;
}

body {
    height: 100%;
    background-image: url('http://i.imgur.com/9HMnxKs.png');
    background-repeat: repeat-y;
    background-size: 50% auto;
}

Example: http://jsfiddle.net/6vhshyxg/2/

EXTRA NOTE: Notice that both the html and body elements are set to height: 100% in the latter examples. This is to make sure that even if your content is smaller than the page, the background will be at least the height of the user's viewport. Without the explicit height, the background effect will only go down as far as your page content. It's also just a good practice in general.

full width background color on a div

Here's a really ugly way to do this. and I'm posting this with an expectation of someone downvoting this... but it works.

Here's a fiddle for it http://jsfiddle.net/5mn22/8/

Add this to your CSS:

.toggle_title, .toggle_content {
    position:relative;
    z-index:2;
}

.toggle:before {
    content:"";  
    width:4000px;
    position:absolute;
    height:100%;
    background-color:red;
    left:-50%;
    z-index:1
}

Basically, just adding a null content before the div with a width double the size of expected screen resolution and position it to the left 50% to make sure it stretches the entire distance.

What do you think?

Full-width div with background color

I've changed your html and css using firebug in real-time and it works look:

Your problem is the html, your .wide div are placed on the wrong place, i've placed it correctly, and changed a little the CSS, use these html and css:

HTML:

<div id="bdywrapper2">
<div class="wide">
<div class="odd">
<div class="homeimage"><img src="http://www.tff-bvba.be/wp-content/uploads/2013/11/hugo-home.png" alt="hugo-home" class="alignright size-full wp-image-1283"></div>
<div class="hometext">
<h1>Slaag in je materiaalinnovatie</h1>
<p>Plan je een complexe innovatie waarbij de <b>combinatie en vorm van materialen</b> essentieel is? Missen je medewerkers <i>knowhow</i> of heb je tijdelijk versterking nodig?</p>
<p>TFF maximaliseert de slaagkans van je project door:</p>
<ul>
<li><b>35 jaar ervaring</b> in slimme materiaalcombinaties</li>
<li>maximaal <b>draagvlak </b>bij je medewerkers</li>
<li>bewezen expertise in<b> technieken en processen</b></li>
</ul>
<p><a class="bttn" title="Slimme materiaalinnovatie" href="http://www.tff-bvba.be/materiaalinnovatie/">Ontdek ons aanbod</a>
</p></div>
</div>
</div>

<!-- Start of main -->
<div class="main">

<div class="clear"></div>

<!-- Start of dynamic loop -->
<div class="dynoloop">

<!-- ******************************************************************** This is the start of blog loop ********************************************************************-->

<!-- Start of one half first -->
<div class="blog_one_half_first">

<!-- Start of slider wrapper -->
<section class="slider_wrapper">

<!-- Start of slider -->
<section style="overflow: hidden;" class="slider">

<ul style="width: 800%; margin-left: -412px;" class="slides"><li style="width: 412px; float: left; display: block;" class="clone">
        <h3><a href="http://www.tff-bvba.be/testartikel-2/">Een tevreden klant vertelt…</a></h3>
        <br>
        <p>“Mayser/M.Pore ontwikkelt en produceert metaalschuimen voor toepassingen zoals LED-koeling. TFF beschikt over jarenlange ervaring op dit domein. Ze assisteren ons dagelijks op vlak van kwaliteit, productiviteit en creativiteit.”  – Manfred Jordan, CEO Mayser/M.Pore</p>
<p>Meer klanten</p>
        </li>

            <li style="width: 412px; float: left; display: block;">
        <h3><a href="http://www.tff-bvba.be/testartikel-1/">Daarom werk je met ons</a></h3>
        <br>
        <h2><a href="http://www.tff-bvba.be/waarom-wij/">Daarom werk je met ons</a></h2>
<p>1. Unieke ervaring: <b>materiaalinnovatie + bedrijfsvoering</b></p>
<p>
2. <b>Snelle terugverdientijd</b> door interim dividenden</p>
<p>3. Mensgerichte aanpak: <b>draagvlak bij stakeholders</b><br>
<a href="http://www.tff-bvba.be/waarom-wij/" title="Waarom wij?" class="bttn-left">Overtuig jezelf</a></p>
        </li>

                <li style="width: 412px; float: left; display: block;">
        <h3><a href="http://www.tff-bvba.be/testartikel-2/">Een tevreden klant vertelt…</a></h3>
        <br>
        <p>“Mayser/M.Pore ontwikkelt en produceert metaalschuimen voor toepassingen zoals LED-koeling. TFF beschikt over jarenlange ervaring op dit domein. Ze assisteren ons dagelijks op vlak van kwaliteit, productiviteit en creativiteit.”  – Manfred Jordan, CEO Mayser/M.Pore</p>
<p>Meer klanten</p>
        </li>

    <li style="width: 412px; float: left; display: block;" class="clone">
        <h3><a href="http://www.tff-bvba.be/testartikel-1/">Daarom werk je met ons</a></h3>
        <br>
        <h2><a href="http://www.tff-bvba.be/waarom-wij/">Daarom werk je met ons</a></h2>
<p>1. Unieke ervaring: <b>materiaalinnovatie + bedrijfsvoering</b></p>
<p>
2. <b>Snelle terugverdientijd</b> door interim dividenden</p>
<p>3. Mensgerichte aanpak: <b>draagvlak bij stakeholders</b><br>
<a href="http://www.tff-bvba.be/waarom-wij/" title="Waarom wij?" class="bttn-left">Overtuig jezelf</a></p>
        </li></ul>

<ol class="flex-control-nav"><li><a class="active">1</a></li><li><a>2</a></li></ol><ul class="flex-direction-nav"><li><a class="prev" href="#">Prev</a></li><li><a class="next" href="#">Next</a></li></ul></section><!-- End of slider -->

<!-- Start of clear fix --><div class="clear"></div>

</section><!-- End of slider wrapper -->

</div><!-- End of one half first -->

<!-- Start of one half -->
<div class="blog_one_half">

<!-- Start of slider wrapper -->
<section class="slider_wrapper">

<!-- Start of slider -->
<section class="slider">

<ul class="slides">

            <li style="display: list-item;">
        <h3><a href="http://www.tff-bvba.be/testartikel-3/">Een tevreden klant vertelt…</a></h3>
        <br>
        <h2><a href="http://www.tff-bvba.be/onze-referenties/">Een tevreden klant vertelt…</a></h2>
<p>
“Mayser/M.Pore ontwikkelt en produceert metaalschuimen voor toepassingen zoals LED-koeling. TFF beschikt over jarenlange ervaring op dit domein. Ze assisteren ons dagelijks op vlak van kwaliteit, productiviteit en creativiteit.”  – Manfred Jordan, CEO Mayser/M.Pore<br>
<a href="http://www.tff-bvba.be/onze-referenties/" title="Onze referenties" class="bttn-right">Meer klanten</a></p>
        </li>

    </ul>

</section><!-- End of slider -->

<!-- Start of clear fix --><div class="clear"></div>

</section><!-- End of slider wrapper -->

</div><!-- End of one half -->

<!-- ******************************************************************** This is the emd of blog loop ********************************************************************-->

<div class="clear"></div>

</div><!-- End of dynamic loop -->

</div><!-- End of main -->

<!-- Start of accent bottom -->
<div class="accentbottom">

<!-- Start of accent top -->
<div class="accenttop">

</div><!-- End of accent top -->

</div><!-- End of accent bottom -->

</div>

CSS:

.wide { 
    text-align:left;
    font-weight:bold;
    background:#ebebeb;
    margin-bottom: 60px;
    width: 100%;
    height: 465px;
}

How to make the background-color cover the whole div?

You need to clear the float...

One way is to apply overflow:auto to the parent.

.page {
  overflow: auto;
}

.characters {
  margin: 0;
  border: 5px solid black;
  float: left;
  width: 50%;
  box-sizing: border-box;
}

.characters img {
  width: 100%;
  height: auto;
  display: block;
  border-bottom: 5px solid black;
}

.infos {
  background-color: gray;
  padding: 35px;
  text-align: center;
}

.infos h2,
.infos h3 {
  margin: 0;
}

.page {
  margin-top: 35px;
  padding: 10px;
  background-color: lightgray;
}

<div class="page">
  <div class="characters">
    <img src="pic.jpg" alt="pic" width="100px" height="100px" />
    <div class="infos">
      <h2>text</h2>
      <h3>text</h3>
    </div>
  </div>
  <div class="characters">
    <img src="pic.jpg" alt="pic1" width="100px" height="100px" />
    <div class="infos">
      <h2>text</h2>
      <h3>text</h3>
    </div>
  </div>
</div>

div#mContent {
    width: 100%;
    overflow:scroll;
    margin: 0;
    padding: 0;
    background-color: #EFEFEF;
}

<div data-role="content" id="mContent " class="mContent" style="overflow:auto;">