CODEWITHSUNDEEP
htmlcss
Greg
Greg

Reputation: 3063

Issue to float an image to the right

I'm trying to achieve something like this but for some reason float right doesn't seem to be working in my case (picture is place below the text area, not next to it). See JSFiddle http://jsfiddle.net/YJ2p9/ What is wrong? Thanks

<div class="element element-2"> 

  <h4>Overview</h4>
                    <div class="post-content"><p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer</p> <p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer</p> <p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer</p></div><div class="post-thumb"><img src="http://lorempixel.com/output/abstract-q-c-250-200-1.jpg" width="300" height="250">
                </div>

</div>

CSS

.element {

  clear: both;
  width: 100%;
}

.element-2 {
  background-color: #F5F5F5;
  width: 90%;
  margin: auto;
}


.post-thumb {
    float: right;
}
.post-thumb img {
    display: block
}
.post-content {
    margin-left: 10px;
}

Upvotes: 0

Views: 58

Answers (3)

fahd4007
fahd4007

Reputation: 544

change in HTML

<div class="element element-2"> 

  <h4>Overview</h4>
                    <div class="post-content"><p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer</p> <p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer</p> <p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer</p></div><div class="post-thumb"><img src="http://lorempixel.com/output/abstract-q-c-250-200-1.jpg" width="300" height="250">
                </div>

    <div class="element"></div>
</div>

and in css

.element {

  clear: both;
  width: 100%;
}

.element-2 {
  background-color: #F5F5F5;
  width: 90%;
  margin: auto;
}


.post-thumb {
    float: right;
}
.post-thumb img {
    display: block
}
.post-content {
   margin-left: 10px;
width: 300px;
float: left;
}

no need to put image div (post-thumb) inside 'post-content'

Upvotes: 1

Kondax Design
Kondax Design

Reputation: 175

If you wish for the image on the left like your example: http://jsfiddle.net/YJ2p9/7/

.element {
    background-color: #F5F5F5;
    width: 100%;
}    

.post-thumb {
    float: left
    width: 100%;
    margin-right: -calc(100% - 300px);
}
.post-content {
    float: right;
    width: calc(100% - 300px);
    margin-top: -20px;
}

Upvotes: 1

Oli Folkerd
Oli Folkerd

Reputation: 8348

Corrected code can be seen here: http://jsfiddle.net/bd7Jy/3/

the image wanted to be inside the 'post-content' div.

Upvotes: 0

Related Questions