4 Replies - 12098 Views - Last Post: 24 June 2012 - 09:41 PM

#1 fromTheSprawl   User is offline

  • Bloodborne
  • member icon

Reputation: 523
  • View blog
  • Posts: 2,102
  • Joined: 28-December 10

How to properly align two buttons on the top of a div element

Posted 22 June 2012 - 12:09 AM

Hi there. I have this div element which is basically a box where I'll put in a form. Now, I have two buttons, one which is named "Previous" and the other one named "Next". Say if I want to put them both on the bottom or top of the div element, what is the proper way to do it? I did it on the top by this css:
.leftButton{
position:absolute;
text-align:left;
z-index:1;
}

.rightButton{
position:relative;
text-align:right;
}



But I don't know how to implement for it to stick on the bottom of the div. Also, I wrapped my buttons in those div classes. Any advice?

I forgot to add they should be placed left and right and aligned.

This post has been edited by fromTheSprawl: 22 June 2012 - 12:17 AM


Is This A Good Question/Topic? 0
  • +

Replies To: How to properly align two buttons on the top of a div element

#2 enjoibp3   User is offline

  • New D.I.C Head

Reputation: 14
  • View blog
  • Posts: 49
  • Joined: 02-March 11

Re: How to properly align two buttons on the top of a div element

Posted 22 June 2012 - 05:57 AM

You're close with position absolute, add position relative to the div containing the buttons and make the position absolute on both buttons then add bottom: 0, and either left or right 0. Like this:

.leftButton{
position:absolute;
left: 0;
bottom: 0;
z-index:1;
}

.rightButton{
position:absolute;
right: 0;
bottom: 0;
}




That should do what you want :bigsmile:
Was This Post Helpful? 1
  • +
  • -

#3 fromTheSprawl   User is offline

  • Bloodborne
  • member icon

Reputation: 523
  • View blog
  • Posts: 2,102
  • Joined: 28-December 10

Re: How to properly align two buttons on the top of a div element

Posted 24 June 2012 - 06:28 PM

Whoa it worked! Cool. How if I wanted it to stick on top? :)
Was This Post Helpful? 0
  • +
  • -

#4 The Architect 2.0   User is offline

  • D.I.C Regular

Reputation: 37
  • View blog
  • Posts: 351
  • Joined: 22-May 08

Re: How to properly align two buttons on the top of a div element

Posted 24 June 2012 - 09:11 PM

replace bottom with top.
Was This Post Helpful? 1
  • +
  • -

#5 fromTheSprawl   User is offline

  • Bloodborne
  • member icon

Reputation: 523
  • View blog
  • Posts: 2,102
  • Joined: 28-December 10

Re: How to properly align two buttons on the top of a div element

Posted 24 June 2012 - 09:41 PM

Awesome! Thanks. Guess I need to read more on CSS. Thank you very much ^^
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1