CODEWITHSUNDEEP
htmlcss
user3430532
user3430532

Reputation: 91

Buttons on top of each other not side by side?

I have two buttons, that I was hoping to have side by side, however their right on top of each that I can't figure out why.. here's what i'm looking at.

enter image description here

here's my code.

CSS:

  button {
  position: absolute;  
  top: 250px;
   left: -15px; 
   z-index: 9999;
  color:white;
  display: block;
  margin: 30px;
  padding: 7px 35px;
  font: 300 150% langdon;
  background: transparent;
  border: 3px solid white;
  cursor: pointer;
  } 

  button:hover {
  background: black;
  border: 1px solid black;
  }

  button:active {
  background: #2e2e2e;
  border: 1px solid black;
  color: white;
  }

Any ideas?

Upvotes: 0

Views: 3110

Answers (3)

Bharat Geleda
Bharat Geleda

Reputation: 2780

Try position:static; I read that it renders elements in order as they appear in the document flow.

Upvotes: 0

Derek
Derek

Reputation: 3435

position:absolute removes the elements from the normal document flow. Thus, they will be positioned on top of each other where specified (top: 250px;, left: -15px;) since they share the same position styles.

For your scenario, it would probably be better to use floats and margins:

button {
    float:left;
    margin-top:250px;
}

Upvotes: 2

Collin Grady
Collin Grady

Reputation: 2243

In general, position: absolute; should be avoided; you're taking an element out of the standard flow (which means no more side by side or top to bottom reflowing).

If you insist on using it, you need two different positioning rules for your buttons so you can assign them to different places.

Upvotes: 0

Related Questions