Search code examples
htmlcsspixelappearance

What is the way to have the same look of my webpage on different systems

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

Solution

  • 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;
}