CODEWITHSUNDEEP
htmlcsscss-position
Demiën Drost
Demiën Drost

Reputation: 173

Moving an image to the right side of a paragraph

Good day folks,

I am struggling with this for a couple of hours now and could really use some good help! On my website I am trying to move an image to the right side of a paragraph of text.

My code snippet:

.innercontent {
    display: inline-block;
    position: relative;
    width: 90%;
    padding: 3% 5%;
}

.snap {
    display: inline-block;
}

div.expitem {
    margin: 100px 25px;
    min-height: 300;
    padding: 15px;
}

.text {
    width: 50%;
}
<div class="innercontent">
                <div class="expitem">
                    <h1>'Projectnaam 1'</h1>
                    <p class="text" >
                        'Projectomschrijving'
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda unde culpa, ratione exercitationem minus vel quidem eum blanditiis, nobis sint corrupti, neque, rem! Quod aliquid voluptates at consequatur, praesentium.
                    </p>
                    <a href="#" target="_blank">
                        <img alt="screenshot" src="http://www.webactiv.ro/poze/portofoliu_c/vest_grup_install_2014.jpg" width="320px" height="270px" class="snap" />
                    </a>
                </div>
                <div class="expitem">
                    <h1>'Projectnaam 2'</h1>
                    <p class="text" >
                        'Projectomschrijving'
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda unde culpa, ratione exercitationem minus vel quidem eum blanditiis, nobis sint corrupti, neque, rem! Quod aliquid voluptates at consequatur, praesentium.
                    </p>
                    <a href="#" target="_blank">
                        <img alt="screenshot" src="http://www.webactiv.ro/poze/portofoliu_c/vest_grup_install_2014.jpg" width="320px" height="270px" class="snap" />
                    </a>
                </div>   
            </div>

For compatibility reasons I do not want to use float, but if there is no other way, I guess I should have to deal with that. Thank you in advance for trying to answer my question!!

Upvotes: 1

Views: 50

Answers (3)

Bloodhound
Bloodhound

Reputation: 2966

you can solve the problem using bootstrap also.

    .innercontent {
    display: inline-block;
    position: relative;
    width: 90%;
    padding: 3% 5%;
}

.snap {
    display: inline-block;
}

div.expitem {
    margin: 100px 25px;
    min-height: 300;
    padding: 15px;
}

.text {
    width: 50%;
}

html code with bootstrap

  <div class="innercontent">
            <div class="row">
                <div class="expitem">
                    <h1>'Projectnaam 1'</h1>
                    <div class="col-md-6">
                        <p class="text" >
                            'Projectomschrijving'
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda unde culpa, ratione exercitationem minus vel quidem eum blanditiis, nobis sint corrupti, neque, rem! Quod aliquid voluptates at consequatur, praesentium.
                        </p>
                    </div>
                    <div class="col-md-6">
                        <a href="#" target="_blank">
                            <img alt="screenshot" src="http://www.webactiv.ro/poze/portofoliu_c/vest_grup_install_2014.jpg" width="320px" height="270px" class="snap" />
                        </a>
                    </div>
                </div>
                <div class="expitem">
                    <h1>'Projectnaam 2'</h1>
                    <div class="col-md-6">
                        <p class="text" >
                            'Projectomschrijving'
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda unde culpa, ratione exercitationem minus vel quidem eum blanditiis, nobis sint corrupti, neque, rem! Quod aliquid voluptates at consequatur, praesentium.
                        </p>
                    </div>
                    <div class="col-md-6">
                        <a href="#" target="_blank">
                            <img alt="screenshot" src="http://www.webactiv.ro/poze/portofoliu_c/vest_grup_install_2014.jpg" width="320px" height="270px" class="snap" />
                        </a>
                    </div>
                </div>
            </div>   
        </div>

Upvotes: 0

m4n0
m4n0

Reputation: 32285

You should try using a grid system like Bootstrap for the layout, but for your code:

  1. Use display: inline-block on the paragraph since you want to allow some space for the next item to come up on its line.

  2. vertical-align: top to align the paragraph with the images as it leaves some gap above it.

  3. In order to align on smaller screens, you need to reduce the width of the paragraph using media queries.

Notice that while reducing the screen size further, the images align to the bottom. This is the use case for responsive images to get in. Wrap the image inside a % width div and give max-width: 100%, height: auto for the image. As you can see, you will not face any above difficulties if you use any grid system.

JSfiddle Demo 

.innercontent {
  display: inline-block;
  position: relative;
  width: 90%;
  padding: 3% 5%;
}
.snap {
  display: inline-block;
}
div.expitem {
  margin: 100px 25px;
  min-height: 300;
  padding: 15px;
}
.text {
  display: inline-block;
  vertical-align: top;
  width: 50%;
}
@media (max-width: 768px) {
  .text {
    width: 33%;
  }
}
<div class="innercontent">
  <div class="expitem">
    <h1>'Projectnaam 1'</h1>
    <p class="text">
      'Projectomschrijving' Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda unde culpa, ratione exercitationem minus vel quidem eum blanditiis, nobis sint corrupti, neque, rem! Quod aliquid voluptates at consequatur, praesentium.
    </p>
    <a href="#" target="_blank">
      <img alt="screenshot" src="http://www.webactiv.ro/poze/portofoliu_c/vest_grup_install_2014.jpg" width="320px" height="270px" class="snap" />
    </a>
  </div>
  <div class="expitem">
    <h1>'Projectnaam 2'</h1>
    <p class="text">
      'Projectomschrijving' Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda unde culpa, ratione exercitationem minus vel quidem eum blanditiis, nobis sint corrupti, neque, rem! Quod aliquid voluptates at consequatur, praesentium.
    </p>
    <a href="#" target="_blank">
      <img alt="screenshot" src="http://www.webactiv.ro/poze/portofoliu_c/vest_grup_install_2014.jpg" width="320px" height="270px" class="snap" />
    </a>
  </div>
</div>

Upvotes: 3

vvs
vvs

Reputation: 1086

I changed the .text class by adding display: inline-block to it and that seems to push the image to right of the text on a full screen view for me (testing with Safari). Please check if that works like the way you want.

.innercontent {
    display: inline-block;
    position: relative;
    width: 90%;
    padding: 3% 5%;
}

.snap {
    display: inline-block;
}

div.expitem {
    margin: 100px 25px;
    min-height: 300;
    padding: 15px;
}

.text {
    width: 50%;
    display: inline-block;
}
<div class="innercontent">
                <div class="expitem">
                    <h1>'Projectnaam 1'</h1>
                    <p class="text" >
                        'Projectomschrijving'
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda unde culpa, ratione exercitationem minus vel quidem eum blanditiis, nobis sint corrupti, neque, rem! Quod aliquid voluptates at consequatur, praesentium.
                    </p>
                    <a href="#" target="_blank">
                        <img alt="screenshot" src="http://www.webactiv.ro/poze/portofoliu_c/vest_grup_install_2014.jpg" width="320px" height="270px" class="snap" />
                    </a>
                </div>
                <div class="expitem">
                    <h1>'Projectnaam 2'</h1>
                    <p class="text" >
                        'Projectomschrijving'
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda unde culpa, ratione exercitationem minus vel quidem eum blanditiis, nobis sint corrupti, neque, rem! Quod aliquid voluptates at consequatur, praesentium.
                    </p>
                    <a href="#" target="_blank">
                        <img alt="screenshot" src="http://www.webactiv.ro/poze/portofoliu_c/vest_grup_install_2014.jpg" width="320px" height="270px" class="snap" />
                    </a>
                </div>   
            </div>

Upvotes: 0

Related Questions