Text (div) pushes image(div) down

Question

Title basically says it all here's my 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;       
}

And here's my 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>

I tried adding float: left; and float: right; like suggested in other threads alike but it just pushes my content out of my main divs.

Answer 1

Add class -

DEMO

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

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

Answer 2

If I understand what you are trying to do, floats will work, but you need to clear them to stop them "pushing content out of your main divs". Add a clearfix div and float the image.

 #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 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>