Question

Please take a look at this fiddle: http://jsfiddle.net/d3uc9/4/

I have a problem with this, as the two divs, in a table, next to each other, are not on the same margin line, even thought they share the same css class etc.

What have I done wrong in the example, and must I change to make them on the same margin-top line?

Thanks, I have tried to be as clear as possible.

What I mean is that they should share the same margin-top line, but they don’t, and what must I do to fix this?

Answer 1

You just need something like:

td {    vertical-align: top;}

Example fiddle

This says that the content of a table cell is aligned to the top of the cell rather than to the middle. This is needed because your left hand div is not as big as the one on the right.

Also I notice that you are duplicating ids several times in your HTML (eg <div id="stylized" class="myform">). This is not valid HTML and can potentially cause unexpected behaviour in browsers. IDs must be unique and if you want to identify multiple elements in the same way for style purposes then you should use classes.

eg.

<div class="stylized myform">