Текст (ДИВ) выталкивает изображение (ДИВ) вниз

Question

Название в основном говорит, что все это вот моя CSS:

#content_container { 
    width: 930px; 
    padding: 3px; 
    margin: 10px; 
} 
#text_container { 
    width: 490px; 
} 
p { 
    font-size: 14px; 
    font-family: Tahoma, Geneva, sans-serif; 
    text-align: left; 
}  
#side_img { 
    background-image: url(../resources/side_img.jpg); 
    width:250px; 
    height:250px; 
    margin-left: 500px;  
} 

А вот мой HTML:

<div id=content_container> 
    <h2> Welkom op de site voor echte stroopwafel liefhebbers! </h2>  
    <div id=text_container> 
    <p id=main_text>    
    </p> 
    </div> 
    <div id=side_img>   
    </div> 
</div> 

Я попытался добавления float: left; и float: right;, как предложено в других потоков, но он просто выталкивает мой контент из моих основных разделов.

Answer 1

Если я понимаю, что вы пытаетесь сделать, поплавки будет работать, но вам нужно, чтобы очистить их, чтобы остановить их «толкая содержимое из вашего основные divs ". Добавьте clearfix div и поместите изображение.

#text_container{ 
    width: 490px; 
} 
p{ 
    font-size: 14px; 
    font-family: Tahoma, Geneva, sans-serif; 
    text-align: left; 
} 
#side_img{ 
    background-image: url(../resources/side_img.jpg); 
    width:250px; 
    height:250px; 
    margin-left: 500px; /* remove this */ 
    float: right; /* add this */ 
} 
.clearfix { /* add this */ 
    clear: both; 
} 

<div id=content_container> 
    <h2> Welkom op de site voor echte stroopwafel liefhebbers! </h2> 

    <div id=text_container> 
     <p id=main_text> 

     </p> 
    </div> 
    <div id=side_img> 

    </div> 
    <div class="clearfix"></div> <!-- Add this --> 
</div> 

Answer 2

Добавить класс -

DEMO

#text_container{ 
    width: 490px; 
    float:left; 
} 

#side_img{ 
    float:right; 
    /* margin-left: 500px;* 
} 

Answer 3

remove margin-left from #side_img css and add float:left in #text_container css... 
id should be defined as id="" 

#content_container{ 
    width: 930px; 
    padding: 3px; 
    margin: 10px; 

    } 
.clearfix{ 
clear:both; 
} 
     #text_container{ 
     width: 490px; 
     float:left; 
     } 
      p{ 
       font-size: 14px; 
       font-family: Tahoma, Geneva, sans-serif; 
       text-align: left; 
      } 

     #side_img{ 
      background-image: url(../resources/side_img.jpg); 
      width:250px; 
      height:250px; 
      /* margin-left: 500px;*/ 

      } 



<div id="content_container"> 
    <h2> Welkom op de site voor echte stroopwafel liefhebbers! </h2> 

     <div id="text_container"> 
      <p id="main_text"> 

      </p> 
     </div> 
     <div id="side_img"> 

     </div> 
<div class="clearfix"></div> 
    </div>