CODEWITHSUNDEEP
htmlcss
azrm
azrm

Reputation: 199

The whole div with icon should be clickable

I don't know how I can make the plus icon over the whole distance of the divs clickable. I can only make the plus is clickable. How can I divide the div full and place the plus to the right? How can I give the div full width but the plus in the bottom right place? Any help will be appreciated. Thank You.

.bg {
  width: 100%;
  background-color: red;
}

.br {
  position: absolute !important;
  bottom: 5px;
  right: 5px;
}

.plus:hover {
  color: green;
}

.bg:hover {
  color: green;
}
<div class="bg">
  <div class="plus br">
    <span>+</span>
  </div>
</div>

Upvotes: 0

Views: 109

Answers (4)

Oke Tega
Oke Tega

Reputation: 883

Wrapp in an anchor tag and align the text in div carry the "+" right

<a href="#">
    <div style="text-align:right">
        +
    </div>
</a>

Upvotes: 0

lalit bhakuni
lalit bhakuni

Reputation: 627

you set position bottom:5px if you want div position according to .bg please use prance div in relative please try i thing it's helpful 

<!DOCTYPE html>
<html>
<head>
 <style>
  
  
.bg {
    background-color: red;
    position: relative;
    width: 100%;
}

 .br {
    background: #222 none repeat scroll 0 0;
    color: #fff;
    position: absolute !important;
    right: 5px;
    top: 5px;
}

.br{
    position: absolute !important;
    top: 5px;
    right: 5px;
}

.plus:hover{
 color: green;
}

.bg:hover{
 color: green;
}

    </style>
</head>
<body>
 
 <div class="bg">
        <div class="plus br">
          <span>+</span>
        </div>
      </div>
</body>
</html>

if you want clickable plush icon add in <a> or <button>

Upvotes: 0

KOUSIK MANDAL
KOUSIK MANDAL

Reputation: 2052

This should work, try it;

<a href="#">
    <div style="text-align:right">
        +
    </div>
</a>

Upvotes: 1

Carl Binalla
Carl Binalla

Reputation: 5401

Try this

<a href="#">
    <div class="bg">
        <div class="plus br">
            <span>+</span>
        </div>
    </div>
</a>

Upvotes: 0

Related Questions