Different methods of website layouts with HTML/JavaScript?

This is more of a "best practices" question. I'm doing some front-end web development and right now when I place elements (text, button, etc) I literally do everything by pixel, and append it to a main div element. Here's an example:

var button = document.createElement('input');
button.type = "button";
button.value = "Click Me";
button.style.position = "absolute";
button.style.top = "200px";
button.style.left = "150px";
mainDiv.appendChild(button); 

...And I'm doing like every element this way, and it's starting to feel wrong (was really easy at first, but now if I want to change a layout by adding/removing elements, I have to change like 50 numbers from element positions). Also, I'm not sure if specifying exact pixel locations is good when it comes to cross-browser (and scr开发者_运维百科een resolution) compatibility.

I'd much rather have a way where elements are positioned more relative to each other, so adding in one new element doesn't mean I have to reposition everything else.

Could you guys help point me in the right direction for this? Thanks a lot.

Best practice is to use HTML to define the semantics of your page and use CSS to position and style it..

So if you want to move one button 10px from the one above it:

<input type="button" id="button1">
<input type="button" id="button2">

#button1 { margin-bottom: 10px; }

This really is a really broad question - you need basic HTML and CSS.