CODEWITHSUNDEEP
htmlcss
fresher
fresher

Reputation: 901

display icons and text in one line with same gap between each

please visit here , on top right 3 icons and text is displaying

enter image description here

i want to hide gap b/w 1st & 2nd icon , also i want to display text : indian rupees after 3rd icon.

float: right;
position: relative;
top: 29px;
z-index: 999;

please help me to find solution.

thanks in advance.

Upvotes: 0

Views: 58

Answers (1)

somdow
somdow

Reputation: 6318

Looking at the code real fast, the alignment of the icons is a wee bit off. For a cleaner simpler solution, using pseudo code below, you simply do something like this

<div id="topRightWrapper">
   <div class="miniIcons">search icon here</div>
   <div class="miniIcons">cart button here</div>
   <div class="miniIcons">person icon here</div>
   <div class="miniIcons">Currency text here</div>
</div>

and then you simply "float right" the "topRightWrapper", and float left/right the "miniIcons".

Then, you may have to adjust a bit the popup functionality you get with those buttons but not by much.

PS: Looking further @ your code, you are almost there but the problem is that the currency text/div, isnt in the same parent wrapper as the other icons. If you place them in the same manner i said above, it will work. You COULD technically do it with absolute positioning etc but thats a nightmare for something this simple. Hope this helps.

Upvotes: 1

Related Questions