-1

I was developing a webpage, for which I placed two buttons, made their position relative and placed them in the center using

position : relative
top : 100px;
left:400px;
width:200px;

Now, It looks alright on my system, but I am pretty sure on a system with different dimensions, the look is going to get screwed up. Also, the resolutions are going to vary the placement of my buttons.

What is the best way to make it work on all devices. Can't I do something like, instead of mentioning the exact pixels that I want it to move, maybe put a percentage or something. I am not sure how to do this.

Thanks

Kraken
  • 23,393
  • 37
  • 102
  • 162
  • 1
    For them to always be _in the center_, use `width:200px;margin:0 auto`. Also read more about responsive web design. – Vucko Feb 11 '14 at 09:25
  • *maybe put a percentage or something. I am not sure how to do this.* Just do `10%` instead of `100px`? – xec Feb 11 '14 at 09:26

1 Answers1

0

Working demo

HTML:

CSS:

#parent {
  text-align: center;
  width: 600px;
  background: grey;
}
.child {
  display: inline-block;
  width: 120px;
  height: 100px;
  margin-top: 30px;
}
.child:first-child {
  background: teal;
}
.child:last-child {
  background: steelblue;
}
Vikram Deshmukh
  • 12,304
  • 4
  • 36
  • 38