Full-width div with background color

Question

On this page: http://www.tff-bvba.be, I need the grey background behind the picture to be full-width on all resolutions, and the text and picture to be centered on the screen. Everything works ok, except the fact that the background continues to the right, off the screen (scroll to the right, you'll see).

I spent 2 hours looking for a solution but found none that worked for me... This is my code:

HTML:

<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>
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?<br /><br />TFF maximaliseert de slaagkans van je project door:
<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>
<a class="bttn" title="Slimme materiaalinnovatie" href="http://www.tff-bvba.be/materiaalinnovatie/">Ontdek ons aanbod</a>
</div>
</div>
</div>

CSS:

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

.odd {
    background-color:#ebebeb;
    clear:both;
    width:900px;
    padding:40px 0 27px 0;
    margin: 0 auto;
    }

.hometext {
    float: left;
    width: 500px;
}

.homeimage {
        margin-top: 0px;
    float: right;
}

Thanks for your help, much appreciated! Stefaan

Answer 1

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.”  &ndash; 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.”  &ndash; 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.”  &ndash; 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;
}