Zwei Bilder nebeneinander und Text darauf

Question

Ich versuche, Bilder als Hintergrund hinzuzufügen, und ich muss Text auf beiden schreiben. Das Problem, mit dem ich konfrontiert bin, ist die Lücke s/w zwei Bilder. Ich weiß nicht, warum es mir eine Lücke zeigt.

<div class='imgcontainer'> 
    <div id="first"> <h4 > SYRIAN CRISIS </h4> 
     <p > We are organizing a conference in April 2016 on 
      water and humanitarian aspects of the Syrian crisis. 
      Click <a href="projectc.html">here</a> to learn about the crisis and our 
      conference.</p></div> 
    <div id="second"><h2>SMALLHOLDER</h2><h3> AGRICULTURE</h3> 
     <p>We are organizing a workshop in April 2016 on smallholder irrigation in Sub-Saharan Africa. Click here 
      to learn about the challenge of agriculture in the 
      region and our workshop.</p> 
    </div> 
    <div id="clear"></div> 
</div> 






#first { 
    width: 680px; 
    background: url('../images/banner-img1.jpg'); 
    float: left; 
    background-repeat: no-repeat; 
    height: 440px; 
    margin: auto; 
} 
#second { 
    width: 650px; 
    float: right; 
    background: url('../images/banner-img2.jpg'); 
    height: 440px; 
    margin: auto; 
    background-repeat: no-repeat; 

} 

Answer 1

Ich glaube, Ihr Bildschirm ist breiter als 680px + 650px = 1330px

Erste div nach links ausgerichtet ist, zweite auf der rechten Seite, haben beide Breiten festgelegt .. wenn Ihr Browser Breite>1330px Sie werden eine Lücke haben zwischen diesen

Answer 2

DEMO

CSS divs:

.imgcontainer { 
    position: relative; 
} 

.right, 
.left { 
    width: 50%; 
    position: absolute; 
} 

.right { 
    right: 0; 
} 

.left { 
    left: 0; 
} 

#first { 
    width: 50%; 
    position: absolute; 
    background: url('../images/banner-img1.jpg'); 
    left: 0; 
} 

#second { 
    width: 50%; 
    position: absolute; 
    background: url('../images/banner-img2.jpg'); 
    right: 0; 
} 

HTML:

<div class='imgcontainer'> 
    <div id="first"> 
    <h4> SYRIAN CRISIS </h4> 
    <p> We are organizing a conference in April 2016 on water and humanitarian aspects of the Syrian crisis. Click <a href="projectc.html">here</a> to learn about the crisis and our conference. 
    </p> 
    </div> 
    <div id="second"> 
    <h2>SMALLHOLDER</h2> 
    <h3> AGRICULTURE</h3> 
    <p>We are organizing a workshop in April 2016 on smallholder irrigation in Sub-Saharan Africa. Click here to learn about the challenge of agriculture in the region and our workshop.</p> 
    </div> 
    <div id="clear"></div> 
</div>