Aligning divs center next to eachother with valign: top

Take a look here http://www.basenharald.nl/3d. For the home part i put on some black borders so you can see what i mean.

The problem: I need to position the 2 blocks (the "hey"block and the right part) next to each other in the center and position them individual from there on out. The logical thing to开发者_Go百科 do is to use display: inline block. Now the problem is that it does not valign top, so i cannot position them with margins.

Basically what i want to do is position the "hey"part slightly to the left and the "right"part slightly to the right and a tat downwards.

What is the best way to do so? It needs to be centered all time cause of the perspective effect and resolutions. Hope i am clear enough, otherwise just ask.

this is the css part i am talking about:

#home-welkom { text-align:left; width: 465px; margin: 360px 400px 100px; 230px; margin: 0 auto; display: inline-block;  color:#787778; font-size:11px; border:1px solid black; }
#home-right { text-align:left; width: 330px; margin: 50px 0px 0 0; position: relative; margin: 0 auto; display: inline-block; border:1px solid black; }

Also not that the margin property does not influence the divs at all

---

You're going to have to rethink your design strategy. Here's a few pointers:

• Use divs instead of lists to layout your page (lists are good for menus, etc)
• margins can only be used once per class
• use div floats to position your divs side by side
• store your javascripts externally this way your code will be cleaner

Now for your question this is what you're looking for to position your elements:

<div id="wrapper" style="position: relative; margin: 0 auto; width: 800px; text-align: left">
<div id="leftcol" style="float: left; width: 400px;">left column</div>
<div id="rightcol" style="float: left; width: 400px;">right column</div>
</div>

Finally I would make sure and validate my code and you can do so here: http://validator.w3.org/

Hope this helps.