CODEWITHSUNDEEP
htmlcss
user6038967
user6038967

Reputation:

Place button on bottom of div or screen

I want to position my button on the bottom of a div or the bottom of the screen (but in a non-fixed position). My code structure looks like this:

  1. div-1
    1. div-2
      1. div-3
        1. button

I want to put the button at the bottom of div 1, which height is set using jQuery (The height is the height of the screen, so putting the button at the bottom of the screen may also be a solution)

What I've tried so far:

CSS

.button {
    position: fixed;
    bottom: 10px;
    left: 50%;
    margin-left: -104.5px; /*104.5px is half of the button's width*/
}

This centers the button (what I want) and it places it at the bottom of the screen, but the position is fixed, so if I scroll down the button goes down aswell. I've also tried setting the button's position to absolute and div-1's position to relative, this didn't work either.

Edit: The div's height is variable, so margins may not be such a good option

Upvotes: 9

Views: 76378

Answers (6)

Parth Developer
Parth Developer

Reputation: 1857

Here is the responsive width:

position: absolute;
bottom: 23px;
left: 10%;
width: 80%;

enter image description here

enter image description here

Upvotes: 0

Revi Ana
Revi Ana

Reputation: 31

if width div 50% then left must 25% if width div 70% then left must 15% 

.center{
  position:fixed;
  bottom:20px;
  left:20%;
  width:60%;
 
}

 .center .btn{
     background:red;
     width:100%;
     color:white;
     font-weight:bold;
     border-radius: 64px;
    padding:10px;
  }
<div class="center">
  <button class="btn">Login</button>
</div>

Upvotes: 3

edisonmecaj
edisonmecaj

Reputation: 1142

Try using VW instead of px.

HTML:

<button class="button">TEST</button>

CSS:

.button {
    position: fixed;
    bottom: 10px;
    left: 47vw;
    width: 6vw;
}

EDIT:

HTML:

<div class="div">
<button class="button">TEST</button>
</div>

CSS:

.div{
   position: relative;
   border: 1px solid black;
   width: 500px;
   height: 250px;
}
.button {
    position: absolute;
    bottom: 5px;
    left: 50%;
    width: 50px;
    margin-left: -25px;
}

I was looking the code instead of the question so i forget that the real question was add the button on the bottom of div or screen.

The parent div has to be position: relative; and the button position: absolute;

Upvotes: 2

CodeWeis
CodeWeis

Reputation: 856

just do the button position:absolute without putting the div relativ

.button {
    position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: -104.5px; /*104.5px is half of the button's width*/
}
.test{
  height:1000px;
  
}
<div class="test">
 <div>
    <div>
      <button class="button">
            test
      </button>
    </div>
  </div>
</div>

Upvotes: 10

oboshto
oboshto

Reputation: 3627

You should use position: absolute on your button when parent element height and width is 100% (of document or page).

<div class="div-1">
  <div class="div-2">
    <div class="div-3">
      <button>
      Just a button
      </button>
    </div>
  </div>
</div>

and css with little reset:

* {
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
}

.div-1 {
  position: relative;
  height: 100%;
  width: 100%;
}

.div-2, .div-3{
  width: inherit;
  height: inherit;
}

button {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

Here is JSfiddle

Upvotes: 0

Johnny
Johnny

Reputation: 771

I believe these Stack Overflow posts might be of help to you:

1) How do I get a div to float to the bottom of its container

2) HTML/CSS positioning float bottom

If this doesn't help can you please also provide your HTML code.

Upvotes: 1

Related Questions