html - Text (div) pushes image(div) down -


title says here's 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 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; , float: right; suggested in other threads alike pushes content out of main divs.

if understand trying do, floats work, need clear them stop them "pushing content out of main divs". add clearfix div , float 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 */    float: right; /* add */  }  .clearfix { /* add */    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 --> </div> 

Comments

Popular posts from this blog

c++ - QTextObjectInterface with Qml TextEdit (QQuickTextEdit) -

javascript - angular ng-required radio button not toggling required off in firefox 33, OK in chrome -

xcode - Swift Playground - Files are not readable -