CODEWITHSUNDEEP
htmlcssalignment
H Bellamy
H Bellamy

Reputation: 22705

Why are two divs next to each other in columns not in the same position

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?

Upvotes: 0

Views: 277

Answers (4)

EfficionDave
EfficionDave

Reputation: 2746

The problem is the vertical alignment of the table. The easiest way to fix it is to add valign="top" to either the <tbody> or <tr>. You could also do it through css by specifying vertical-align:top for the <tr>.

Upvotes: 1

cappone
cappone

Reputation: 31

Adding valign="top" will make the column on the left align to the top of the row.

Upvotes: 2

Beatriz Oliveira
Beatriz Oliveira

Reputation: 659

Just add to your css:

td {vertical-align:top;}

Upvotes: 2

Chris
Chris

Reputation: 27599

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">

Upvotes: 3

Related Questions