Question 183360 in Html Question posted in
Some basic documentation can be found here.

Html – Im trying to get an image to the left side of a text box

Can anyone tell me what wrong with the css? The image appears at the bottom of the text box

<img src="husitsmotors.png" alt="Husqvarna FC 450 Dzinējs" style="float: right;width: 200px;">

And this is the css for the text box, both are in the same div.

.dzinejs {
    background-color: white;
    color: black;
    margin-right: 100px;
    margin-left: 50px;
    height: 200px;
    width: 90%;
    font-size: 10px;
    font-family: Arial;
    font-style: normal;
    padding-top: 2rem;
    padding-left: 20px;
    padding-right: 250px;
}

Most of the things I have tried resulted in either nothing happening or it getting more messed up. If I take it out of the dzinejs div then I cant get the image to align with the text.

Tags:

2

Answers


  1. 0

    just replace float right to float: left; in img tag

    .dzinejs {
    background-color: white;
    color: black;
    margin-right: 100px;
    margin-left: 50px;
    height: 200px;
    width: 90%;
    font-size: 10px;
    font-family: Arial;
    font-style: normal;
    padding-top: 2rem;
    padding-left: 20px;
    padding-right: 250px;
}
    <img src="https://picsum.photos/200" alt="Husqvarna FC 450 Dzinējs" style="float: left;width: 200px;">
    Login or Signup to reply.
  2. 0

    you can do it like this

    .dzinejs {
  display: flex;
}

.dzinejs img {
  width:4em;
  height:4em;
}
    <!-- begin snippet: js hide: false console: true babel: false -->
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search