The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Image in line with text
Seniorbfc
post Feb 22 2017, 10:40 AM
Post #1


Newbie
*

Group: Members
Posts: 17
Joined: 16-January 17
Member No.: 26,267



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 .
CODE

<div id="about">
    <h3>About</h3>
    <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;">
</div>

CODE

#about{
    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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 22 2017, 12:42 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,772
Joined: 9-August 06
Member No.: 6



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. .
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Seniorbfc
post Feb 26 2017, 10:13 AM
Post #3


Newbie
*

Group: Members
Posts: 17
Joined: 16-January 17
Member No.: 26,267



Thanks tongue.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 11th December 2017 - 05:45 PM