Tobias Yeomans Tobias Yeomans - 5 months ago 15
HTML Question

Trouble with float css element

I am having some basic issues with my code where I am trying to get a heading and a paragraph to display onto the left side of an image inside a div. It works perfectly fine when I have a heading but as soon as I throw anything in the paragraph it makes the image go further down and displays the paragraph above it:

Here is what I want it to look like

gyazo.com/0596041414dc7229abc6640659e3d0a0

Here is what it looks like:

gyazo.com/b099a4ccb7b3e973de2d7d54a5b050ad

And here is my code:

<div class="box3">
<h2 class="minecrafter" style="float:left;padding-left:15px;padding-top:10px;letter-spacing:3px;">Apply Now</h2>
<p class="minecrafter" style="float:left;padding-left:15px;letter-spacing:1px;padding-top:5px;font-size:13px;">Lorem ipsum dolor sit amet, mel id fabulas dolorum, lorem vulputate ei his. </p>
<img src="images/applyheretoday.png" style="height:90%;float:right;margin-top:13px;margin-right:10px">
</div>

.box3 {
margin-top:3px;
margin-left:5%;
float:left;
width:65%;
background:#707070;
height:300px;
}

.minecrafter {
font-family:minecrafter;
color:#FFFFFF;
}

Answer

Under the image add a clear like so

<div class="clear"></div>

and the style for it

.clear {
    clear:both;
}

You might want to reformat your html a little to get your desired effect :

 <div class="box3"> 
     <div id="box3left">
         <h2 class="minecrafter">Apply Now</h2>
         <p class="minecrafter" >Lorem ipsum dolor sit amet, mel id fabulas dolorum, lorem vulputate ei his. </p>
     </div>
     <img src="images/applyheretoday.png">
 </div>

and the accompanying css

.box3 #box3left { 
  display: block;
  float:left;
  width: 40%;
 }

.box3 img {
 display: block;
 float: left;
 width: 60% 
  }

you should adjust the width's according to how you want it sized and add whatever padding/margins you need. Try to avoid inline styling if you can.

Comments