CODEWITHSUNDEEP
htmlcss
Christopher Altamirano
Christopher Altamirano

Reputation: 157

How can i move this button to the upper right side of my div?

I am trying to put my button in the top right corner, i am making a static youtube page for practice. I dont want directly in the corner i would give it some padding around it. 

.anotherDescription {
  background-color: white;
  width: 800px;
  height: 150px;
  margin-top: 15px;
}

.anotherDescription .profileImg img {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  padding: 30px;
  float: left;
}

.anotherDescription h4 {
  padding-top: 35px;
  text-transform: uppercase;
}

.anotherDescription .moreInfo {
  padding-top: 5px;
}

.anotherDescription .showMore {
  color: gray;
}

.anotherDescription button {
  float: right;
}
<div class="anotherDescription">
  <div class="profileImg"> <img src="https://d12swbtw719y4s.cloudfront.
      net/images/UzogpLEQ/g7F4rwlJRkm 
       QBBF6j4S/Cartoon.jpeg?w=500"></div>
  <h4>loerm ipsum</h4>
  <p>Published on March 8, 2019</p>
  <p class="moreInfo">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam...</p>
  <p class="showMore">Show More</p>
  <button>Subscribe</button>
</div>

Upvotes: 1

Views: 74

Answers (3)

Hrishikesh Shukla
Hrishikesh Shukla

Reputation: 61

Instead of padding, you would like to give margin to the button; and you need to think that you want the button to be at the top right of div or top right of html document.

If you want the button to be top right of div:

<!DOCTYPE html>
<html>
    <head>
        <title>try</title>
        <style type="text/css">
            .anotherDescription {
  background-color: white;
  width: 800px;
  height: 150px;
  margin-top: 15px;
}

.anotherDescription .profileImg img {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  padding: 30px;
  float: left;
}

.anotherDescription h4 {
  padding-top: 35px;
  text-transform: uppercase;
}

.anotherDescription .moreInfo {
  padding-top: 5px;
}

.anotherDescription .showMore {
  color: gray;
}

.anotherDescription button {
  float: right;
  margin: 20px 20px 0px 0px;
}
        </style>
    </head>
    <body>
        <div class="anotherDescription">
            <button>Subscribe</button>
            <div class="profileImg"> 
                <img src="https://d12swbtw719y4s.cloudfront.net/images/UzogpLEQ/g7F4rwlJRkmQBBF6j4S/Cartoon.jpeg?w=500">
            </div>
            <h4>loerm ipsum</h4>
            <p>Published on March 8, 2019</p>
            <p class="moreInfo">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam...
            </p>
            <p class="showMore">Show More</p>
        </div>
    </body>
</html>

If you want the button to be at the top right of page:

<!DOCTYPE html>
<html>
    <head>
        <title>try</title>
        <style type="text/css">
            .anotherDescription {
  background-color: white;
  width: 800px;
  height: 150px;
  margin-top: 15px;
}

.anotherDescription .profileImg img {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  padding: 30px;
  float: left;
}

.anotherDescription h4 {
  padding-top: 35px;
  text-transform: uppercase;
}

.anotherDescription .moreInfo {
  padding-top: 5px;
}

.anotherDescription .showMore {
  color: gray;
}

.anotherDescription button {
    margin: 20px 20px 0px 0px;
    position: absolute;
    right: 20px;
}
        </style>
    </head>
    <body>
        <div class="anotherDescription">
            <button>Subscribe</button>
            <div class="profileImg"> 
                <img src="https://d12swbtw719y4s.cloudfront.net/images/UzogpLEQ/g7F4rwlJRkmQBBF6j4S/Cartoon.jpeg?w=500">
            </div>
            <h4>loerm ipsum</h4>
            <p>Published on March 8, 2019</p>
            <p class="moreInfo">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam...
            </p>
            <p class="showMore">Show More</p>
        </div>
    </body>
</html>

NOTE: I have used Internal Stylesheet in above code. Code starting from tag is CSS part.

Upvotes: 0

Chema
Chema

Reputation: 365

Did you try to put it upper in the code? 

<div class="anotherDescription">

  <button>Subscribe</button>

  <div class="profileImg"> <img src="https://d12swbtw719y4s.cloudfront.
      net/images/UzogpLEQ/g7F4rwlJRkm 
       QBBF6j4S/Cartoon.jpeg?w=500"></div>
  <h4>loerm ipsum</h4>
  <p>Published on March 8, 2019</p>
  <p class="moreInfo">Lorem ipsum dolor sit amet, consectetur adipisicing elit,                    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam...</p>
  <p class="showMore">Show More</p>
</div>

Upvotes: 2

Jordan Soltman
Jordan Soltman

Reputation: 3873

You could absolutely position it to the top right as shown below.

.anotherDescription {
  background-color: white;
  width: 800px;
  height: 150px;
  margin-top: 15px;
}

.anotherDescription .profileImg img {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  padding: 30px;
  float: left;
}

.anotherDescription h4 {
  padding-top: 35px;
  text-transform: uppercase;
}

.anotherDescription .moreInfo {
  padding-top: 5px;
}

.anotherDescription .showMore {
  color: gray;
}

.anotherDescription button {
  position: absolute;
  top: 20px;
  right: 20px;
}
<div class="anotherDescription">
  <div class="profileImg"> <img src="https://d12swbtw719y4s.cloudfront.
  net/images/UzogpLEQ/g7F4rwlJRkm 
   QBBF6j4S/Cartoon.jpeg?w=500"></div>
  <h4>loerm ipsum</h4>
  <p>Published on March 8, 2019</p>
  <p class="moreInfo">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam...</p>
  <p class="showMore">Show More</p>
  <button>Subscribe</button>
</div>
</div>

Upvotes: 1

Related Questions