2 replies [Last post]
guhya77
guhya77's picture
Offline
newbie
UK
Last seen: 7 years 34 weeks ago
UK
Timezone: GMT+1
Joined: 2013-10-22
Posts: 2
Points: 5

Hi

I've been trying to achieve this result
example.jpg

by styling the following code

<img src="image.jpg" />
<h2>Heading</h2>
 
<p>
paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph
</p>
<p>
paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph
paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph
</p>

So far without success unless I move the tag in between the two

tags, however that would be an unwanted compromise.

Does anybody know if it's possible to achieve this by styling the code provided?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 3 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Here's something you could

Here's something you could try:

 img{
  border:solid red 2px;
  width:50px;
  height:50px;
  position:absolute;
  top:200px;
  right:10px;
 
}
p:last-of-type::before{
  content:" "; 
  float:right; 
  width:100px; 
  height:100px; 
  background:blue;
}

You will need to work out how to have the image positioned correctly, specially at different browser sizes.

guhya77
guhya77's picture
Offline
newbie
UK
Last seen: 7 years 34 weeks ago
UK
Timezone: GMT+1
Joined: 2013-10-22
Posts: 2
Points: 5

Thank you, that solved the

Thank you, that solved the issue!

I managed to get position right by wrapping it all in a div and applying position: relative to it.

<style>
div{
  margin: 0 auto;
  position:relative; 
  width: 650px;
}
 
img{
  border:solid black 1px;
  width:100px;
  height:100px;
  position:absolute;
  top:130px;
  right:56px;
 
}
p:last-of-type::before{
  content:" "; 
  float:right; 
  width:100px; 
  height:100px; 
  background:white;
  margin: 0 10px;
}
</style>

I didn't know of the last-of-type selector, after googling it I can see that it's something that will be very useful in some of my future projects.

So thank you very much for enlighten me with it Smile