CODEWITHSUNDEEP
htmlcss
dakben
dakben

Reputation: 59

Need to have image and text on same line

I am not very good at CSS, I am just learning. I need to have the div with the class "profile_picture" on the same lines as the div with class "text". Can I get some guidance. 

    <div class="card">
<div class="cardimage">
  <img src="./images/desert.jpg" alt="Desert Picture" height="194">
</div>
<div class="text">
  <h2 class="card_title">Title goes here</h2>
  <div class="sec_text"> Secondary text </div>
</div>
<div class="profile_picture">
  <img alt="Profile Picture" src="./images/person-avatar.jpg" width="40">
</div>
<div class="bodytext">
  <p class="card_text">Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
</div>
</div>
</body>

Below is my CSS 

.card {
    width: 344px;
    background: red;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);

}
* {
     box-sizing: border-box;
     margin: 0px;
     padding: 0px;

 }
 .bodytext {
     padding: 16px;
 }

 .cardimage {
    text-align:center;
 }
 .card_title {
     color: #000;
     font-size: 22px;
 }
 .sec_text, .card_text {
     color: #232F34
 }
 .card_text {
     font-size: 11px;
 }

Upvotes: 0

Views: 88

Answers (1)

John
John

Reputation: 5337

You can set both the profile picture and the text classes to display: inline-block;

Adding this: 

.profile_picture{
   display: inline-block;
 }

 .text {
   display: inline-block;
 }

Here's a working example:

.card {
    width: 344px;
    background: red;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);

}
* {
     box-sizing: border-box;
     margin: 0px;
     padding: 0px;

 }
 .bodytext {
     padding: 16px;
 }

 .cardimage {
    text-align:center;
 }
 .card_title {
     color: #000;
     font-size: 22px;
 }
 .sec_text, .card_text {
     color: #232F34
 }
 .card_text {
     font-size: 11px;
 }
 
 .profile_picture{
   display: inline-block;
   float: left;
 }

 .text {
   display: inline-block;
 }
<div class="card">
<div class="cardimage">
  <img src="https://www.w3schools.com/html/img_girl.jpg" alt="Desert Picture" height="194">
</div>
<div class="text">
  <h2 class="card_title">Title goes here</h2>
  <div class="sec_text"> Secondary text </div>
</div>
<div class="profile_picture">
  <img alt="Profile Picture" src="https://www.w3schools.com/html/img_girl.jpg" width="40">
</div>
<div class="bodytext">
  <p class="card_text">Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
</div>
</div>

Upvotes: 1

Related Questions