CODEWITHSUNDEEP
csshtml
keitex
keitex

Reputation: 15

Place image next to text in a DIV

Trying to put an image next to a paragraph but it does not seem to work.

This is what I have:

<div class="dhn-info-div">
    <p>DEVONSHIRE HOUSE NETWORK IS A <span class="dhn-purple">PEOPLE-FOCUSED</span> MEMBERSHIP CLUB FOR DIRECTOR-LEVEL <span class="dhn-purple">PROFESSIONALS</span> IN LEADERSHIP ROLES WHO HAVE AN INSTINCTIVE FOCUS ON <span class="dhn-purple">THE HUMAN SIDE OF ENTERPRISE..</span></p>            
   <img src="wp-content/themes/expound/images/dhn-directors.png" alt="Devonshire House Network Directors">
   <div style="clear:both"></div>
</div>

and CSS:

.dhn-info-div {
    margin-top: 20px;
    background-color: #a20e45;
    width: 95%;
    display: inline-block;
}
.dhn-info-div p {
    padding: 20px 40px 20px 40px;
    color: white;
    font-size: 18px;
    line-height: 35px;
    word-spacing: 5px;
}
.dhn-info-div img {
    float: right;
}

Image has to be on the right of the text. The div shouldn't be 100% in size. Cheers

This is how I want it to look:

https://i.sstatic.net/bPxbB.png

Upvotes: 0

Views: 17574

Answers (4)

Joe RR
Joe RR

Reputation: 262

Edit: is now responsive!

i made this fiddle, check it http://jsfiddle.net/fYh7u/

you can wrap the text in a div, and the image in another div, inside the main div "dnh-info-div", in my example i miss the "div", at end of class, because is obvious.

HTML:

<div class="dhn-info">
<div class="dhn-text">
    <p>devonshire house network is a <span class="text-purple">people-focused</span> membership club for director-level <span class="text-purple">professionals</span> in leadership roles who have an <span class="text-purple">instinctive focus</span> on <span class="text-purple">the human side of enterprise.</span></p>
</div>
<div class="dhn-img">
    <img src="http://i.imgur.com/kzJiOjx.jpg" alt="" />
</div>

CSS:

.dhn-info {
    width: 100%;
    background-color: #a20e45;
    display: inline-block;
}
.dhn-info .dhn-text {
    width: 50%;
    height: auto;
    float: left;
    padding: 20px 10px 0px 35px;
}
.dhn-info .dhn-text p {
    font-family: arial;
    font-size: 24px;
    color: #fff;
    line-height: 30px;
    text-transform: uppercase;
    word-spacing: 5px;
    margin: 0;
    padding: 0;
    display: block;
}
.dhn-info .dhn-img {
    width: 40%;
    height: 100%;
    float: right;
}

.dhn-info .dhn-text p > span.text-purple {
    color: #9b59b6;
}
.dhn-info .dhn-img img {
  display: block;
  height: auto;
  max-width: 100%;
}

Upvotes: 0

Stuart
Stuart

Reputation: 1168

Depending on if you want to wrap the text around the image or have 2 columns, here’s both solutions:

  1. If you want to wrap the text around the image it needs to be within the p tag. See example (I have also added 10px padding around the image).

  2. If you want 2 columns you need to define the width of both so they fit in. I have also added float: left; to both and some padding to the image to make it look slightly better. See example

Upvotes: 1

SaturnsEye
SaturnsEye

Reputation: 6499

EXAMPLE

You needed to add some width to some elements such as the text also you had no width or height on your image.

I also added top:40px; to your image to bring it down to the level of the text

Upvotes: 1

RononDex
RononDex

Reputation: 4183

Can you put the <img> in your <p> at top? that would fix it:

<div class="dhn-info-div">
    <p>
        <img src="wp-content/themes/expound/images/dhn-directors.png" alt="Devonshire House Network Directors" />
        DEVONSHIRE HOUSE NETWORK IS A <span class="dhn-purple">PEOPLE-FOCUSED</span> MEMBERSHIP CLUB FOR DIRECTOR-LEVEL <span class="dhn-purple">PROFESSIONALS</span> IN LEADERSHIP ROLES WHO HAVE AN INSTINCTIVE FOCUS ON <span class="dhn-purple">THE HUMAN SIDE OF ENTERPRISE..</span>

    </p>

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

Upvotes: 0

Related Questions