CODEWITHSUNDEEP
htmlcss
ylimes
ylimes

Reputation: 77

How to move Text inside a box to specific location

so I'm trying to get the text close to the image, maybe like 2px away. How would one do that? what is the best way to move text, images or even button inside a box. In the location i want. (I've attached an image of how it looks like now, ive been playing around on W3 schools)enter image description here

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .card {
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
      transition: 0.3s;
      width: 80%;
    }
    
    .card:hover {
      box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    }
    
    .container {
      padding: 2px 150px;
      float: right;
    }
  </style>
</head>

<body>

  <h2>Card</h2>

  <div class="card">
    <img src="img_avatar.png" alt="Avatar" style="width:40%">
    <div class="container">
      <h4><b>John Doe</b></h4>
      <p>Architect & Engineer</p>
    </div>
  </div>

</body>

</html>

Upvotes: 0

Views: 4404

Answers (2)

skaz
skaz

Reputation: 301

There's a ton of different ways you can layout your designs. It's just a matter of figuring out exactly what you want to do and then implementing a method of your choosing. You're options include things like grid, flexbox, and positioning elements absolute. I've given a simple example snippet below where the text is positioned using flexbox in a column direction and then aligning the elements within the flexbox individually. For example, I have the h4 tag set to align left with some padding to give that gap between the image and the h4 tag.

Again, there are lots of different ways to go about it. Try out a few different methods and experiment to find what works best for you. 

.card{
   background-color: salmon;
   height: 150px;
   display: flex;
   justify-content: space-between
}
.card_wrap_right{
   background-color: lightblue;
   width: 50%;
   position: relative;
   display: flex;
   flex-direction: column;
}
.card_wrap_right>h4{
   align-self: left;
   padding-left: 10px;
}
.card_wrap_right>p{
   align-self: center;
}
   
<body>
  <h2>Card Title</h2>
  <div class="card">
    <span class='card_image'> IMAGE HERE </span>
    <div class="card_wrap_right">
      <h4>JOHN DOE</h4>
      <p>Architect & Engineer</p>
    </div>
  </div>
</body>

Upvotes: 1

Pete
Pete

Reputation: 58462

You can use flex on the containing div:

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  width: 80%;
  display: flex;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.container {
  flex-grow:1; /* this make the container grow to fill the rest of the row */
  padding-left:10px; /* this is your gap between picture and text */
}
<h2>Card</h2>

<div class="card">
  <img src="https://www.fillmurray.com/g/200/300" alt="Avatar" style="width:40%">
  <div class="container">
    <h4><b>John Doe</b></h4>
    <p>Architect & Engineer</p>
  </div>
</div>

Upvotes: 3

Related Questions