2

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;
}
Improve this question
1
  • You need a clear, you're getting column collapse. Also consider moving the inline css into the styles. Commented Apr 22, 2015 at 20:25

3 Answers 3

Reset to default
1

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Not working, it will work if I just add that class to the existing div right?
@TobiasYeomans Apply the logic your code, should be fine. It is intiially breaking because the floats have column collapse, I put all your text in 1 div and floated that left, as well as took off their inline styling. You can re-apply any padding or margins if you need them. Also I don't know what width's you want that stuff i just took a guess with %
@TobiasYeomans if you post your attempt at applying this to your stuff in your question as an update I can try and help :)
0

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/

Improve this answer

Comments

0

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>
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.