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
Post a Comment