Tobias Yeomans Tobias Yeomans -5 years ago 138
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

Here is what it looks like:

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

.box3 {

.minecrafter {

Answer Source

Under the image add a clear like so

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

and the style for it

.clear {

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>
     <img src="images/applyheretoday.png">

and the accompanying css

.box3 #box3left { 
  display: block;
  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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download