0

I am trying to understand the basics of html, I did this little code and I don't know how to make the image left of the body contents.

<html>
<img src="https://previews.123rf.com/images/alvincadiz/alvincadiz1604/alvincadiz160400358/56426319-vector-illustration-of-smiley-emoticon-sad-face.jpg" alt="Smiley face" style="float:left;width:42px;height:42px;">

<style>
    body {
        width: 15em;
        margin: 0 auto;
        font-family: Tahoma, Verdana, Arial, sans-serif;
    }
</style>

<body>
“People say nothing is impossible, but I do nothing every day."
<p>– A. A. Milne</p>
</body>


</html>

you can see the page from here : page

so as you can see the image has taken the place of the body contents, when you remove the image bloc and run it again you will notice that the body contents returned to it's actual place. enter image description here enter image description here

I want it like this :

enter image description here

So how can I put a floating image left of the body contents without taking the place of the body contents ?

5
  • I'm confused, because you seem to have achieved already what you're asking about. The image is to the left. Can you clarify your question? Also, tags like the <img> tag should go inside the <body> tag, but that's not your problem here. Jan 12, 2020 at 17:05
  • it's normal when remove image the content takes it's place ? Jan 12, 2020 at 17:05
  • Yes, that's what float: left means. Other content wraps around it. Are you trying to reserve space on the left, regardless of whether the image is there or not? Jan 12, 2020 at 17:06
  • I just don't want from the image to take the place of that text "people..." I want that text to stay up "-A.A. Milne" and the image on the left of them Jan 12, 2020 at 17:07
  • Your HTML is invalid and maybe missing a doctype. An <img> tag may not appear before the <body> tag.
    – Rob
    Jan 12, 2020 at 18:13

2 Answers 2

1

If I am understanding your question correctly, although the image is placed to the left, you want the text body to remain inline.

Something like this? https://www.w3schools.com/code/tryit.asp?filename=GAUA12AA769P

<style>
    .post-container {
        margin: 20px 20px 0 0;
        overflow: auto;
    }

    .post-thumb {
        float: left;
    }

    .post-thumb img {
        display: block;
        width: 42px;
        height: 42px;
    }

    .post-content {
        margin-left: 50px;
    }
</style>

<body>
    <div class="post-container">
        <div class="post-thumb"><img src="https://previews.123rf.com/images/alvincadiz/alvincadiz1604/alvincadiz160400358/56426319-vector-illustration-of-smiley-emoticon-sad-face.jpg" /></div>
        <div class="post-content">
            <p>“People say nothing is impossible, but I do nothing every day."</p>
            <p>– A. A. Milne</p>
        </div>
    </div>
</body>

Most notibly I've added display: block; to the image and set a margin-left: 50px; on the text content.

EDIT https://www.w3schools.com/code/tryit.asp?filename=GAUA575L092N

<style>
    body {
        width: 15em;
        margin: 0 auto;
        font-family: Tahoma, Verdana, Arial, sans-serif;
    }

    .post-container {
        margin: 20px 20px 0 0;
        overflow: auto;
    }

    .post-thumb {
        margin-top: 30px;
        float: left;
    }

    .post-thumb img {
        display: block;
        width: 42px;
        height: 42px;
    }

    .post-content {
        margin-left: 50px;
    }
</style>

<body>
    <div class="post-container">
        <div class="post-thumb"><img src="https://previews.123rf.com/images/alvincadiz/alvincadiz1604/alvincadiz160400358/56426319-vector-illustration-of-smiley-emoticon-sad-face.jpg" /></div>
        <div class="post-content">
            <p>“People say nothing is impossible, but I do nothing every day."</p>
            <p>– A. A. Milne</p>
        </div>
    </div>
</body>

I've added the body styling back. There is a margin-top on the image which pushes it down to be centred against the text, but if you wanted the image to appear at the top left of the text just remove margin-top: 30px from the .post-thumb class.

A better option would be to use something like flexbox for this however.

EDIT 2:

I have updated my code to use flexbox, which is a much cleaner and concise solution. You can read more about here.

"This is an approach to layout creation, alignment of elements and distribution of extra space.

Flex stands for flexible, adaptive. Flexboxes are thus flexible elements of the layout. One of the main advantages of flexbox is the ability to fill extra space without the need to use Javascript."

https://www.w3schools.com/code/tryit.asp?filename=GAUAC9HBCS2S

<style>
    body {
        width: 15em;
        margin: 0 auto;
        font-family: Tahoma, Verdana, Arial, sans-serif;
    }

    .flex-item {
        display: flex;
        align-items: center;
    }

    .flex-item img {
        flex-grow: 0;
        flex-shrink: 0;
        width: 42px;
        height: 42px;
        margin-right: 15px;
    }
</style>

<body>
    <div class="flex-item">
        <img src="https://previews.123rf.com/images/alvincadiz/alvincadiz1604/alvincadiz160400358/56426319-vector-illustration-of-smiley-emoticon-sad-face.jpg">
        <div>
            <p>“People say nothing is impossible, but I do nothing every day."</p>
            <p>– A. A. Milne</p>
        </div>
    </div>
</body>
2
  • But I don't want to change the style of the body I want to let it like in the first picture. Jan 12, 2020 at 17:11
  • You are required to post your code here, within your question, and not a link to your site or any third party site. Links to code
    – Rob
    Jan 12, 2020 at 18:14
1

You need to give the image a separate container from the text.

I have used some example from bootstrap.css stylesheet to give the solution as a responsive page. I also took out the 'float' from the image style, you don't need that. Rather give your paragraph a margin.

A better practice is to separate the .html page and the stylesheet, then link the style into your html page.

<!DOCTYPE html>
<html>

<style>
    body {
        width: 15em;
        margin: 0 auto;
        font-family: Tahoma, Verdana, Arial, sans-serif;
       }

    .col-med-2 {
    width: 16.6666%;
    float: left;
    }

    .col-med-10 {
    width: 83.3333%;
    float: left;
    }

    img {
  border-style: none;
  vertical-align: middle;
  max-width: 100%;
  height: auto;
	}


</style>

<body>
<div class="col-med-2">
<img src="https://previews.123rf.com/images/alvincadiz/alvincadiz1604/alvincadiz160400358/56426319-vector-illustration-of-smiley-emoticon-sad-face.jpg" alt="Smiley face" style="width:42px;height:auto;">
</div>

<div class="col-med-10">
<p>“People say nothing is impossible, but I do nothing every day."</p>
<p>– A. A. Milne</p>
</div>


</body>
</html>

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.