Текст (div) подталкивает изображение (div) вниз

Название в основном говорит все это здесь: 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; как и в других потоках, но это просто выводит мой контент из моих основных разделов.

3 ответа

Если я понимаю, что вы пытаетесь сделать, поплавки будут работать, но вам нужно очистить их, чтобы они не "выталкивали содержимое из ваших основных разделов". Добавьте 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>
  <!-- Add this -->
</div>


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

DEMO

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

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


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>

licensed under cc by-sa 3.0 with attribution.