CODEWITHSUNDEEP
htmlcss
totalnoob
totalnoob

Reputation: 2741

align image to right of paragraph css

I'd like to align an image to the right of a paragraph, and I'd like to be able to do so without having to set a fixed width on the paragraph along with some padding away from the image. how can I do that?

https://jsfiddle.net/mnakoajk/

* {
  box-sizing: border-box;
}

p {
  float: left;
  border: solid 1px #000;
  display: inline-block;
}

img {
  float: right;
  display: inline-block;
}
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<img src="https://media.tenor.co/images/fe795771396053d4e1d55904dcf20298/tenor.gif" />

Upvotes: 1

Views: 10899

Answers (9)

blecaf
blecaf

Reputation: 1645

You can put both in a container and use flexbox. For the sample below i used "body" as the container. See code below

* {
  box-sizing: border-box;
}
body {
  display: flex;
}
p {
  border: solid 1px #000;
  width: auto;
  margin: 0;
}

img {
}
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>

<img src="https://media.tenor.co/images/fe795771396053d4e1d55904dcf20298/tenor.gif" />

Upvotes: 0

Nawed Khan
Nawed Khan

Reputation: 4401

Move the IMG above the P tag and then remove float and display from the P tag.

p {
  border: solid 1px #000;
  width: auto;
}

Here is updated jsfiddle: https://jsfiddle.net/mnakoajk/5/

and then put margin left and margin bottom on the IMG tag to keep paragraph text at a safe distance.

Updated jsfiddle: https://jsfiddle.net/mnakoajk/6

Upvotes: 1

Muhammad Umar
Muhammad Umar

Reputation: 348

Have a look in this JSFiddle. I have added css in the style tag in html but i can change it in few moments.

https://jsfiddle.net/o6f2z27n/5/

Now the idea is to set width to be 60% and 30% of paragraph and img respectively

     <div class="container">
         <p></p>  
         <img />
    </div>

Upvotes: 0

user6297534
user6297534

Reputation: 149

Adding/deleting or replacing display property won't help since

and both are block level elements. Only by adding width this can be achieved.

Upvotes: 0

Matej Kolec&#39;ko
Matej Kolec&#39;ko

Reputation: 119

Change order of p and img. And remove inline-block property from p element.

* {
  box-sizing: border-box;
}

p {
  border: solid 1px #000;
}

img {
  float: right;
  display: inline-block;
}
<img src="https://media.tenor.co/images/fe795771396053d4e1d55904dcf20298/tenor.gif" />
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>

Upvotes: 1

Giulio Bambini
Giulio Bambini

Reputation: 4755

Specify the paragraph width. Like width: 55%;

Upvotes: 1

Aziz
Aziz

Reputation: 20705

Place <img> inside <p>. 

<p>
<img src="https://media.tenor.co/images/fe795771396053d4e1d55904dcf20298/tenor.gif" />
is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
</p>

https://jsfiddle.net/uvew5yw2/

Upvotes: 4

FFdeveloper
FFdeveloper

Reputation: 241

I think this might be a solution:

https://jsfiddle.net/mnakoajk/1/

I will explain: you can use a wrapper div for both <p> and <img> tags. The div wrapper must have this rule:

display: flex;

So you can put inner elements next to each others. After this, you can control width and height of the img tag.

Hope it helps

Upvotes: 0

MrMisery
MrMisery

Reputation: 416

Replace display: inline-block; in both of the elements with display: block; or remove it completely. if it doesn't work you can add width:x px to the elements.

Upvotes: 1

Related Questions