Cannot align text and image side by side?

Question

I have added an image and text. Text has 1 <h6> and 2 <p> tags. I tried using float:left but it does not get displayed side by side.

content.js:

 <div className="col l4">
    <div className="card1">
        <img className="javacardimg" src={java} alt="Java" height="65" width="65"></img>
      <h6 className="cardtitle1">New Launch</h6>
            <p className="cardcontent1">JAVA</p><p></p>
        <p className="cardcontent1">Foundations</p>
  </div>
</div>

<div className="col l4">
  <div className="card2">
      <img className="neuralcard" src={neural} alt="Neural Network" height="65" width="65"></img>
      <h6 className="cardtitle2">Enroll Now</h6>
            <p className="cardcontent2">Neural Newtwork</p><p></p>
        <p className="cardcontent2">Foundations</p>
  </div>
</div>

css:

.cardcontent{
    float: left;
}

.card1 {
    width: 100%;
}

.card1 > h6 {
    margin: 0px;
}

I want to display New Launch JAVA Foundations on right of image similarly for card2 but current css does not work I tried few css styling but does not work.

Screenshot:

@SpiderCode I am not able to add images in fiddle as I have downloaded it from internet. — stone rock, Mar 13 '18 at 06:11
@SpiderCode I am trying to do similar to this screenshot: https://imgur.com/a/Yq0BJ — stone rock, Mar 13 '18 at 06:13

Bhuwan · Accepted Answer · 2018-03-13T06:33:32.370

2

Try to use Flexbox here...and also wrap your right side content into a div for better practice and readability

.card1 {
  display: flex;
  align-items: flex-start;
}

h6 {
  margin-top: 0;
}

.item {
  padding-left: 10px;
}

<div class="card1">
  <img className="javacardimg" src="http://via.placeholder.com/100x100?text=JAVA" alt="Java">
  <div class="item">
    <h6 className="cardtitle1">New Launch</h6>
    <p className="cardcontent1">JAVA Foundations</p>
  </div>
</div>

edited Mar 13 '18 at 06:33

answered Mar 13 '18 at 06:17

Bhuwan

16,525
5
34
57

1

@stonerock here `.item` is used for to wrap your right side `h6` and `p` together to make it a whole item for better readability and also for better alignment – Bhuwan Mar 13 '18 at 06:23
Can you please help me here: https://stackoverflow.com/questions/49248123/cannot-display-images-in-reactjs – stone rock Mar 13 '18 at 06:33

Cannot align text and image side by side?

1 Answers1