CODEWITHSUNDEEP
csssasstailwind-css
JaChNo
JaChNo

Reputation: 1563

float right button without going outside parent div tailwindcss

I am trying to float a button to the right of a card. I want it to appear in the bottom righthand corner.

When I use a float right. It appears outside the parent div, is there a way to position it correctly?

<div class="m-10">
    <div>
        <div class="bg-white shadow-lg border-grey w-1/3 ">
            <div class="p-4 flex">
                <div class="pt-3 text-center font-bold text-2xl w-16  h-16 bg-grey-lightest">
                    D
                </div>
                <div class="ml-4">
                    Team Name
                </div>
            </div>
            <div class="float-right">
                <a :href="'/company/' + team.id">
                    <button class="ml-2 bg-blue hover:bg-blue-dark text-white text-sm font-bold rounded p-2">
                        View
                    </button>
                </a>
            </div>
        </div>
    </div>
</div>

enter image description here

I have a running sandbox here with the code

https://codesandbox.io/s/tailwind-css-nl0ph

Upvotes: 6

Views: 29823

Answers (3)

Jessej Samuel
Jessej Samuel

Reputation: 71

You just need to apply float-right to the button element instead of the parent div

<div class="m-10">
      <div>
        <div class="bg-white shadow-lg border-gray-400 w-1/3">
          <div class="p-4 flex">
            <div class="pt-3 text-center font-bold text-2xl w-16  h-16 bg-gray-200">
              D
            </div>
            <div class="ml-4">Team Name</div>
          </div>
          <div class="h-fit min-h-full flex justify-end">
            <a href="'/company/' + team.id">
              <button class="float-right ml-2 bg-blue-400 hover:bg-blue-600 text-white text-sm font-bold rounded px-2 py-1">
                View
              </button>
            </a>
          </div>
        </div>
      </div>
    </div>

Upvotes: 4

Rich
Rich

Reputation: 562

Instead of using the float-right class use text-right

Upvotes: 12

Gianfranco Fertino
Gianfranco Fertino

Reputation: 632

Add this new class to clear floating element

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

and then apply that class to the containing div (parent div of the button)

source: https://www.w3schools.com/howto/howto_css_clearfix.asp

Upvotes: -3

Related Questions