CODEWITHSUNDEEP
htmlcss
user4815729
user4815729

Reputation:

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;
}

Upvotes: 2

Views: 48

Answers (3)

ajmajmajma
ajmajmajma

Reputation: 14216

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.

Upvotes: 1

Adam Dunn
Adam Dunn

Reputation: 132

Looks like you have too many things floated. If you want the IMG to be on the right, that should be the only thing you need floated. You'll have to include the IMG first though.

Here's the corrected HTML code:

<div class="box3">
    <img src="images/applyheretoday.png" style="height:90%;float:right;margin-top:13px;margin-right:10px" />
    <h2 class="minecrafter" style="padding-left:15px;padding-top:10px;letter-spacing:3px;">Apply Now</h2>
    <p class="minecrafter" style="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>
</div>

Upvotes: 0

pavel
pavel

Reputation: 27072

Without setting widths put image before others ad remove float:left from h2 and p.

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

.minecrafter {
    font-family:minecrafter;
    color:#FFFFFF;
}
</style>

<div class="box3">
    <img src="images/applyheretoday.png" style="height:90%;float:right;margin-top:13px;margin-right:10px">
    <h2 class="minecrafter" style="padding-left:15px;padding-top:10px;letter-spacing:3px;">Apply Now</h2>
    <p class="minecrafter" style="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>
</div>

http://jsfiddle.net/k8reyzhc/

Upvotes: 0

Related Questions