Полноразмерный div с цветом фона

Question

На этой странице: http://www.tff-bvba.be, мне нужен серый фон за рисунком, чтобы быть полной шириной во всех разрешениях, а текст и изображение должны быть центрированы на экране. Все работает нормально, за исключением того факта, что фон продолжается вправо, с экрана (прокрутите вправо, вы увидите).

Я провел 2 часа в поисках решения, но не нашел ничего, что работал для меня ... Это мой код:

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; 
} 

Спасибо за вашу помощь, очень ценим! Stefaan

Answer 1

Я изменил свой HTML и CSS, используя поджигатель в режиме реального времени, и это работает внешний вид:

Ваша проблема является html, ваш .wide div размещены не в том месте, я разместил его правильно и немного изменил CSS, используйте эти htm л и 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; 
} 

Answer 2

Try Ниже CSS

.main { 
    margin: 0 auto; 
    padding-bottom: 60px; 
    width: 100%; 
} 
.wide { 
    background-color: #EBEBEB; 
    font-weight: bold; 
    height: 465px; 
    text-align: left; 
} 

Answer 3

Простые изменения будут делать трюк для вас

удалить margin-left:-100%; margin-right:-100%; из CLA сс .wide и дать odd класс 100% width instaed из 900px

Ваш CSS в данный момент растягивания Б.Г. .... !!

EDIT:

редактировать после комментария: используйте wrapper класс, чтобы обернуть весь текст и изображения, положить odd в width:100%, это позволит обеспечить лучшую совместимость и простоту потока CSS

HTML

<div class="odd"> 
<div class="wrapper"> 
    <div class="homeimage"> 
     <img src="" class="alignright size-full wp-image-1283" /> 
    </div> 
    <div class="hometext"> 
    </div> 
</div> <!-- //wrapper --> 
</div><!-- //odd--> 

CSS

.wrapper{width:90%;margin:0 auto} // this will center the div and not take whole width at the same time