CODEWITHSUNDEEP
htmlcss
Mandroid
Mandroid

Reputation: 7468

Unable to position a image and text side by side using css/html

In my html file, I have following:

<div>
     <!--some divs here-->

     <div>
          <svg class="tick-icon" xmlns="http://www.w3.org/2000/svg" 
                   viewBox="0 0 16 16">
            <!--svg image details-->
          </svg>
          <p class="got-it">Got it</p>

          <!--Some more elements-->
     </div>       
</div>

CSS for 'tick-icon' and 'got-it' are as follows:

.tick-icon {
  margin-top: 47px;
  margin-left: 12px;
  margin-bottom: 20px;
  margin-right: 2px;
  width: 24px;
  height: 24px;
 }

.got-it {
  margin-top: 43px;
  margin-left: 2px;
  margin-bottom: 26px;
  margin-right: 124px;
  font-size: 12px;
  color: #6f737a;
  width: 35px;
  height: 14px;
}

For outermost div, I have style as position:relative.

My objective is to display svg iamge and text 'Got it' side by side somewhere near bottom edge of a rectangular box. But what I get is that while sbg is displayed at expected position, text is displayed well below the image, something like in image below.

enter image description here

How can I correctly position text on right of the image separated a bit?

PS: I have tried using float: left, but it removes the text all together.

Upvotes: 0

Views: 76

Answers (1)

Omri Attiya
Omri Attiya

Reputation: 4037

You can use flexbox and change its direction to row. That way you can put elements horizontally. If you want a space between them, just use margin-left on the text element. 

.tick-icon {
  margin-top: 47px;
  margin-left: 12px;
  margin-bottom: 20px;
  margin-right: 2px;
  width: 24px;
  height: 24px;
}

.got-it {
  margin-top: 43px;
  margin-left: 2px;
  margin-bottom: 26px;
  margin-right: 124px;
  font-size: 12px;
  color: #6f737a;
  width: 35px;
  height: 14px;
}

.horizontal-div {
  display: flex;
  flex-direction: row;
}
<div>
  <!--some divs here-->

  <div class="horizontal-div">
    <svg class="tick-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
            <!--svg image details-->
          </svg>
    <p class="got-it">Got it</p>

    <!--Some more elements-->
  </div>
</div>

Upvotes: 2

Related Questions