CODEWITHSUNDEEP
htmlcss
mina cosentino
mina cosentino

Reputation: 91

How do I position the icon to the right of the heading?

I would like the layout to look as so, but also be responsive (so that the heading + paragraph both stay positioned to the left of the icon).

enter image description here

CSS:

.feature {
  position: relative;
  border: 1px solid #000;
}

.circle {
  height: 2.5rem;
  width: 2.5rem;
  background-color: #64beeb;
  border-radius: 50%;
  float: right;
}

.icon {
  font-size: 1.75rem;
  color: #fff;
}

HTML:

<div class="feature">
  <div class="text text-right">
    <p class="h2">Diversity of Content</p>
    <p class="descrip">Dive deep and share themed content across various topics based on your audience</p>
  </div>
  <div class="circle text-center">
    <i class="icon ion-android-bulb"></i>
  </div>
</div>

CODEPEN DEMO

Upvotes: 0

Views: 1729

Answers (4)

smilebomb
smilebomb

Reputation: 5493

Put the float:right div before the .text-right div. Then add padding-right:2.5rem; to the .text-right div.

Example

Upvotes: 0

sol
sol

Reputation: 22959

One option is to use flexbox. You can add display: flex to the container (.feature). Add flex: 1 to the text. To create some space around the icon you can use a margin value you find suitable.

.feature {
  position: relative;
  border: 1px solid #000;
  /* for demo */
  text-align: right;
  display: flex;
}

.text {
  flex: 1;
}

.circle {
  height: 2.5rem;
  width: 2.5rem;
  background-color: #64beeb;
  border-radius: 50%;
  margin: 1rem;
}

.icon {
  font-size: 1.75rem;
  color: #fff;
}
<div class="feature">
  <div class="text text-right">
    <p class="h2">Diversity of Content</p>
    <p class="descrip">Dive deep and share themed content across various topics based on your audience</p>
  </div>
  <div class="circle text-center">
    <i class="icon ion-android-bulb"></i>
  </div>
</div>

Upvotes: 0

Shaban Khan
Shaban Khan

Reputation: 156

         <div class="feature">
            <div class="circle text-center">
                <i class="icon ion-android-bulb"></i>
              </div>
              <div class="text text-right">
                <p class="h2">Diversity of Content</p>
                <p class="descrip">Dive deep and share themed content across various topics based on your audience</p>
              </div>
         </div>
         <style>
          .circle{
             float:right;
             width:40px;
             height:40px;
             margin:0 0 0 20px;
          }
          .text{
             overflow:hidden;
          }
         </style>

Upvotes: 0

caramba
caramba

Reputation: 22490

add this to .circle and remove float:right; Then it will be absolutely positioned from the parent relative container.

  position: absolute;
  top: 10px;
  right: 10px;


.feature {
  position: relative;
  border: 1px solid #000;
}

.circle {
  position: absolute;
  top: 10px;
  right: 10px;
  height: 2.5rem;
  width: 2.5rem;
  background-color: #64beeb;
  border-radius: 50%;
}

.icon {
  font-size: 1.75rem;
  color: #fff;
}
<div class="feature">
  <div class="text text-right">
    <p class="h2">Diversity of Content</p>
    <p class="descrip">Dive deep and share themed content across various topics based on your audience</p>
  </div>
  <div class="circle text-center">
    <i class="icon ion-android-bulb"></i>
  </div>
</div>

And you could add padding-right: 50px; to .feature so the icon (blueih circle) will not be over text. See here https://jsfiddle.net/ymzofeph/

Upvotes: 1

Related Questions