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

Html – how to float divisions side by side like professional web developers?

I am not getting how to float the second division to the upper right corner of the main division.

html {
    width: 100%;
    height:100%;
}

body {
    width: 100%;
    height: 100%;
    font-family: 'Noto Sans', sans-serif;
    background-color: #1b1b1b;
}

.container {
    background-color: #313131;
    width: auto;
    height: calc(100%-30%);
    padding: 20px;
}
.img-wrapper {
    width: 144px;
    height: 216px;
}

img {
    width: 100%;
    height: 100%;
}
.pfmr-info {

    float: right;
}
<div class="container">
 <div class="img-wrapper">
     <picture>
         <source 
         srcset="https://lh3.googleusercontent.com/d/1nGd_KYCiywe7k5upLO7OcVJCNtbtwRqB=w2000?authuser=0" media="(orientation: portrait)" />
         <img 
         src="https://lh3.googleusercontent.com/d/1nGd_KYCiywe7k5upLO7OcVJCNtbtwRqB=w2000?authuser=0" alt="Cherie Deville" />
       </picture>
 </div>
 <div class="pfmr-info">
     <span style="color: #848484;font-size: medium;">Cherie Deville</span>
 </div>
</div>

I need the second div to move to the upper-right corner but it just moves to the right. What should I do?

Tags:

2

Answers


  1. 0

    float shouldn’t be use in that situation. Instead, you can apply display: flex to your .container. One of the default settings for flex is justify-content: flex-start, which (judging from your description) is most likely what you want. Otherwise you could add that parameter and change its setting. Also align-items is a setting you might wat to change from its default normal to baseline or center (just try that to see the effects).

    Additionally, you might want to add some margin-left to .pfmr-info to create a little distance between the image and the name. (see my example below)

    html {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
  font-family: 'Noto Sans', sans-serif;
  background-color: #1b1b1b;
}

.container {
  background-color: #313131;
  width: auto;
  height: calc(100%-30%);
  padding: 20px;
  display: flex;
}

.img-wrapper {
  width: 144px;
  height: 216px;
}

img {
  width: 100%;
  height: 100%;
}

.pfmr-info {
  margin-left: 10px;
}
    <div class="container">
  <div class="img-wrapper">
    <picture>
      <source srcset="https://lh3.googleusercontent.com/d/1nGd_KYCiywe7k5upLO7OcVJCNtbtwRqB=w2000?authuser=0" media="(orientation: portrait)" />
      <img src="https://lh3.googleusercontent.com/d/1nGd_KYCiywe7k5upLO7OcVJCNtbtwRqB=w2000?authuser=0" alt="Cherie Deville" />
    </picture>
  </div>
  <div class="pfmr-info">
    <span style="color: #848484;font-size: medium;">Cherie Deville</span>
  </div>
</div>
    Login or Signup to reply.
  2. 0 
        <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Your Project</title>
        <style>
    
          * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
          }
    
          body {
            width: 100%;
            height: 100%;
            font-family: "Noto Sans", sans-serif;
            background-color: #1b1b1b;
          }
    
          .container {
            background-color: #313131;
            width: auto;
            height: calc(100%-30%);
            padding: 20px;
            margin: 10px;
            display: flex;
            flex-direction: column;
          }
    
          .content {
            display: flex;
            flex-direction: column;
          }
    
          .img-wrapper {
            width: 144px;
            height: 216px;
            margin-bottom: 5px;
          }
    
          img {
            width: 100%;
            height: 100%;
          }
    
          .id {
            padding-right: 20px;
            color: #848484;
            font-size: medium;
          }
        </style>
      </head>
      <body>

    <div class="container">
          <div class="content">
            <div class="img-wrapper">
              <picture>
                <source
                  srcset="
                    https://lh3.googleusercontent.com/d/1nGd_KYCiywe7k5upLO7OcVJCNtbtwRqB=w2000?authuser=0
                  "
                  media="(orientation: portrait)"
                />
                <img
                  src="https://lh3.googleusercontent.com/d/1nGd_KYCiywe7k5upLO7OcVJCNtbtwRqB=w2000?authuser=0"
                  alt="Cherie Deville"
                />
              </picture>
            </div>
            <p class="id">Cherie Deville</p>
          </div>
        </div>

<!-- end snippet -->
      </body>
    </html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search