CODEWITHSUNDEEP
css
user1902133
user1902133

Reputation: 73

Align image next to a paragraph

Not just a simple image next to a paragraph< but with some spaces like this

fdf
(source: gyazo.com)

So far of what I've done :

 <div class="span6">

    <span class="head">Header</span>
            <img style="vertical-align:middle float: left;" src="img/pickaxe.png"/>
    <span class="paragraph">
        This is Photoshop's version  of Lorem Ipsum.
            Proin gravida nibh vel velit auctor aliquet.
            Aenean sollicitudin, lorem quis bibendum auc
        tor, nisi elit consequat ipsum, nec sagittis sem nibh i
    </span>
 
 </div>

.span8 {
   width: 620px;
}
.head {
   font-weight: bold;
   font-size: 26px;
   float: left;
}

.paragraph {
   font-size: 14px;
   width: 300px;

}

And it looks like this

igm
(source: gyazo.com)

Ignore the line, it's a cropper image off the web.

What am I doing wrong? how can I fix this. Thanks!

Upvotes: 0

Views: 3425

Answers (2)

Sumit Gera
Sumit Gera

Reputation: 1241

Consider this fiddle. I have used div element instead of the span element inside the parent div.

<div>
<div class="head">Header</div>
<img style="vertical-align:middle float: left;" src="img/pickaxe.png"/>
</div>

And float the content to the right by adding this.

.paragraph {
 float:right;}

http://jsfiddle.net/AaXTm/8/

The width of the element was less than the parent element and since you didn't use any floats or clear, the elements were visible inline.

Upvotes: 0

JustusKersey
JustusKersey

Reputation: 11

Here is a jsfiddle for you: http://jsfiddle.net/Xxw85/

The code should look more like this:

<div class="span6">

    <p>Header</p>
    <div class="head">
        <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRgMvCRHrTA30jksWsHfDZ4GwWfjJhM8Ck2RAtA_OLeOpnGRTrEXw"/>
    </div>

    <div class="paragraph">
    This is Photoshop's version  of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auc
    tor, nisi elit consequat ipsum, nec sagittis sem nibh i
    </div>

    <div style="clear:both"></div>

 </div>

and css:

.span6 {
  width: 620px;
  background-color:#efefef;
}
.head {
font-weight: bold;
font-size: 26px;
float: left;
color:red;
}

.paragraph {
font-size: 14px;
width: 300px;
float:left;
}

Good luck.

Upvotes: 1

Related Questions