CODEWITHSUNDEEP
htmlcss
SirMajed
SirMajed

Reputation: 173

HTML CSS Question - Image to the left and paragraph to the right

I have an box like (card). There are Avatar and name to the left and I want to add the paragraph to the right. how can I figure this out? (LEFT IS AVATAR AND NAME AND ID),(RIGHT IS PARAGRAPH ONLY) Image: Image The Code

.info {
  ????
}

.wrapper {
  border-radius: 15px;
  margin: 150px;
  background-color: #646664;
  position: relative;
  /* display: grid; */
  grid-gap: 70px;
  grid-template-columns: auto auto;
  padding: 10px;
  justify-content: center;
}

.container {
  text-align: center;
  display: flex;
  width: 70%;
  background: white;
  border-radius: 15px;
  margin: 20px auto;
  padding: 10px;
  height: 300px;
  -webkit-box-shadow: 0px 0px 35px -15px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 35px -15px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 35px -15px rgba(0, 0, 0, 0.75);
}
<div class="wrapper">
  <div class="container">
    <div class="cen">
      <img src="https://placehold.it/20px30" alt="Avatar" style="width:30%">
      <h1 id="Name1"></h1>
      <h2 id="ID1"></h2>
      <h3 id="FCIT1"></h3>
      <div class="info">
        <p id="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Views: 58

Answers (2)

Zeeshan S.
Zeeshan S.

Reputation: 2091

In your HTML move the div.info outside of div.cen.

.info {
  float: right;
}

.cen {
}

.wrapper {
  border-radius: 15px;
  margin: 150px;
  background-color: #646664;
  position: relative;
  /* display: grid; */
  grid-gap: 70px;
  grid-template-columns: auto auto;
  padding: 10px;
  justify-content: center;
}

.container {
  text-align: center;
  display: flex;
  width: 70%;
  background: white;
  border-radius: 15px;
  margin: 20px auto;
  padding: 10px;
  height: 300px;
  -webkit-box-shadow: 0px 0px 35px -15px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 35px -15px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 35px -15px rgba(0, 0, 0, 0.75);
}
<div class="wrapper">
  <div class="container">
    <div class="cen">
      <img src="https://cdn.iconscout.com/icon/free/png-256/avatar-370-456322.png" alt="Avatar" style="width:30%">
      <h1 id="Name1">Majid Alhasin</h1>
      <h2 id="ID1">1744827</h2>
      <h3 id="FCIT1">IT</h3>
    </div>
    <div class="info">
      <p id="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </div>
</div>

Full screen view: Image in fullscreen

Upvotes: 1

StrayAnt
StrayAnt

Reputation: 379

You can do this by using css grid. Some example code below with comments throughout

<!DOCTYPE html>

<head>
    


    <style type="text/css">
        .info{
  ????
}
.wrapper {
  border-radius: 15px;
  margin: 150px;
  background-color: #646664;
  position: relative;
  /* display: grid; */
  grid-gap: 70px;
  grid-template-columns: auto auto;
  padding: 10px;
  justify-content: center;
}

.container {
    /*ADD DISPLAY INLINE-GRID */
    display: inline-grid;
    grid-template-columns: auto auto;


  text-align: center;
  width: 70%;
  background: white;
  border-radius: 15px;
  margin: 20px auto;
  padding: 10px;
  height: 300px;
  -webkit-box-shadow: 0px 0px 35px -15px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 35px -15px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 35px -15px rgba(0, 0, 0, 0.75);

}


    </style>

</head>
<body>
    

<div class="wrapper">
    <div class="container">
        <!-- Split content into two seperate divs -->
        <div class="content1">
            <img src="https://jessehouwing.net/content/images/size/w2000/2018/07/stackoverflow-1.png" alt="Avatar" style="width:100%">
             <h1 id="Name1"></h1>
        <h2 id="ID1"></h2>
        <h3 id="FCIT1"></h3>
        
        </div>
        <div class="content2">
          <p id="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
        </div>
     
       

    </div>
  </div>



</body>



<script type="text/javascript">
    
</script>
</html>

Upvotes: 1

Related Questions