CODEWITHSUNDEEP
htmlcssimagecss-float
PHPLover
PHPLover

Reputation: 12957

How to place the text before the image?

I'm having an image and I want to put the text on left side of image, but I couldn't do it.

Following is my code:

<div style="float:right; width:75%;">
<p style="float: left;">Affiliated to Board of Secondary Education Rajasthan, Jhunjhunu International School is purely english medium from LKG to 10th. It is equipped with most modern study and play equipment, which includes extramarks SMART LEARN CLASS, completely automated school automation software - SchoolPrime, SMS based parent information system, centralized  examination and evaluation, world class celebrations, hobby classes, personality development and above all, Professionally trained team of teachers.</p>

<p style="float: left;">View Details</p>
<img src="images/disp_1_jis_logo.jpg" style="float: right;">
</div>

The screenshot is attached with this post. Can anyone help me to place the text on left of the image? And pull the image upward so that it could be inline with the text.

Upvotes: 0

Views: 139

Answers (5)

XTGX
XTGX

Reputation: 114

try this. 

<div style="float:right; width:75%;text-align: justify;">
<p style="float: left;">
Affiliated to Board of Secondary Education Rajasthan, 
<img src="images/disp_1_jis_logo.jpg" style=" float: right; margin:5px;">

Jhunjhunu International School is purely english medium from LKG to 10th. It is equipped with most modern study and play equipment, which includes extramarks SMART LEARN CLASS, - SchoolPrime, SMS based parent information system, centralized xamination and evaluation, world class celebrations, hobby classes, personality development and above all, Professionally trained team of teachers. 

<p style="float: left;">View Details</p>
</div

Upvotes: 0

Josh Heald
Josh Heald

Reputation: 3947

Think of it like this - by default, every block element, like a paragraph or an image or a div, is placed on a new line starting on the left hand side of its container element, e.g. the body of the page, or another div.

To change this default placing, you float the element you want to move, in this case the image, to the side you want it on, i.e. <img src="images/disp_1_jis_logo.jpg" style="float: right;">, as you have in your code. This puts the element on the extreme right hand side of the container element, on whichever line it is on in the code. Any following element can appear to start on the same line, and will be placed on the left hand side of the line. So, the paragraph you want on the left should be the next element after the image, i.e.

<img src="images/disp_1_jis_logo.jpg" style="float: right;">
<p>Affiliated to Board of Secondary Education Rajasthan, Jhunjhunu International 
School is purely english medium from LKG to 10th. It is equipped with most modern
study and play equipment, which includes extramarks SMART LEARN CLASS, completely
automated school automation software - SchoolPrime, SMS based parent information 
system, centralized  examination and evaluation, world class celebrations, hobby 
classes, personality development and above all, Professionally trained team of 
teachers.</p>
<p>View Details</p>

You can also float elements out of other block elements, i.e. if the image were within the first paragraph block, it would behave in a similar manner.

Upvotes: 0

web2008
web2008

Reputation: 914

Try out this:

<div style="float:right; width:75%;">

<p style="float: left; display: inline-block; width: 800px;"><img src="test.jpg" style="float: left; padding: 0px 10px 10px 0px;">Affiliated to Board of Secondary Education Rajasthan, Jhunjhunu International School is purely english medium from LKG to 10th. It is equipped with most modern study and play equipment, which includes extramarks SMART LEARN CLASS, completely automated school automation software - SchoolPrime, SMS based parent information system, centralized  examination and evaluation, world class celebrations, hobby classes, personality development and above all, Professionally trained team of teachers.
equipment, which includes extramarks SMART LEARN CLASS, completely automated school automation software - SchoolPrime, SMS based parent information system, centralized  examination and evaluation, world class celebrations, hobby classes, personality development and above all, Professionally trained team of teachers.</p>

<p style="float: left;">View Details</p>

</div>

Upvotes: 0

Sowmya
Sowmya

Reputation: 26969

Remove float:left 's from p tag and div.

Add display:inline-block to p tag.

Move the image tag to the top

<div style=" width:75%; display:inline-block">
<img src="images/disp_1_jis_logo.jpg" width="150"style="float: right;">
    <p>Affiliated..</p>
<p >View Details</p>

</div>

DEMO

Upvotes: 2

rosetree
rosetree

Reputation: 105

If you can't change the order of the elements add an width to the first p element.

<p style="float: left; width: 50%">Affiliated ...</p>

Upvotes: 0

Related Questions