Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ Image in line with text

Posted by: Seniorbfc Feb 22 2017, 10:40 AM

How can I get my image in line with my text on the right of it. I have included the code to show what I have tried and an image to show the (unexpected) outcome. P.s. I don't know if "#about img" is a legit thing, i've only just started learning about this stuff tongue.gif .


<div id="about">
    <p>My name is Joshua Senior, I am a second-year student at Sheffield Hallam University studying BSc Hons Accounting and Finance. I have had a keen interest in finance since I was a child and knew that this was the career path I wanted to follow after high-school.</p>
    <img src="Printer.jpg" alt="Printer" style="width:30px; height:30px;">


    background: rgba(64,64,64,1);
    width: 100%;
    height: 300px;
#about h3, #about p, #about img{
    display: inline-block;
    padding-top: 40px;
#about h3{
    padding-left: 550px;
    color: rgba(153,153,153,1);
    float: left;
#about p{
    color: white;
    padding-right: 700px;
    float: right;
    width: 500px;
    text-align: left;
#about img{
    float: right;

Attached thumbnail(s)
Attached Image

Posted by: pandy Feb 22 2017, 12:42 PM

The image isn't the only thing floating. Put it before the floated P and it will be to the right.

If you have two or more floats after each other in the markup, the first one will go all the way out to the left or right, the next one will place itself on the inside of the first one and so on as long as there is room for them. When there isn't they will start dropping to the next line.

I wouldn't float that P. I see no point in it. And with that huge right margin the text will disappear outside the screen, to the left, in a smaller window. If you want to center it, center it the normal way, by giving it a width (px or %) and auto left and right margins. Or just give it equal left and right margins, in percent. I would center the DIV, not the P. And don't use a height on containers with text in them. As the window grows smaller the text block will grow higher and the text needs someplace to go.

It will still look better with the image before the P though. You can change how high up it is with a little top margin, negative or positive. .

Posted by: Seniorbfc Feb 26 2017, 10:13 AM

Thanks tongue.gif

Powered by Invision Power Board (
© Invision Power Services (