0

I create the following HTML page and I would align the two DIV elements (the ones with lista and scheda id, contained within parent div) to the same position, at the top of the page. Here is my code:

#tabella1,
#tabella1 td {
  border: solid 1px;
}
th {
  border: solid 1px;
  font-style: bold;
  background-color: white;
}
#tabella1 tr:nth-child(odd) {
  background-color: gray;
}
#tabella1 tr:nth-child(even) {
  background-color: lightgray;
}
#tabella1 tr:nth-child(n):not(:nth-child(1)):hover {
  background-color: blue;
  color: yellow;
  cursor: pointer;
}
.titolo {
  text-align: center;
  font-weight: bold;
}
#lista {
  display: inline-block;
  margin: 30px;
  position: relative;
  top: 0px;
}
button {
  width: 60px;
  height: 20px;
}
form {
  display: inline-block;
}
#msg {
  font-weight: bold;
}
#scheda {
  display: inline-block;
  position: relative;
  top: 0px;
  text-align: center;
}
#tabella2 td:nth-child(even) {
  border: solid 1px;
}
.cellaVuota {
  width: 140px;
}
<div id="carica">
  <form method="post" action="carica2.php">
    <label for "n">Inserisci nome:
      <input type="text" id="n" name="nome" size="10" />
    </label>
    <button type="submit">Invia</button>
  </form>
  <form method="post" action="carica2.php">
    <button type="submit" name="logout">Logout</button>
  </form>
</div>
<div id="parent">
  <div id="lista">
    <table id="tabella1">
      <tr>
        <th>Modello</th>
        <th>27.5</th>
        <th>29</th>
      </tr>
      <tr>
        <td>Riga 1</td>
        <td>Riga 2</td>
        <td>Riga 3</td>
      </tr>
    </table>
    <p class="titolo">Bici Mountain Bike</p>
  </div>
  <div id="scheda">
    <p class="titolo">Bici selezionata</p>
    <table id="tabella2">
      <tr>
        <td>Modello</td>
        <td class="cellaVuota"></td>
      </tr>
      <tr>
        <td>Misura 27.5</td>
        <td class="cellaVuota"></td>
      </tr>
      <tr>
        <td>Misura 29</td>
        <td class="cellaVuota"></td>
      </tr>
    </table>
  </div>
</div>

I searched and searched here before post this question (see position and ~top` properties in the CSS code), but I do not figure out how to reach my purpose.

Vadim Kotov
  • 8,084
  • 8
  • 48
  • 62
smartmouse
  • 13,912
  • 34
  • 100
  • 166

1 Answers1

1

Just add vertical-align: top; to both divs. You can also remove position: relative; and top: 0; properties

matcygan
  • 665
  • 1
  • 5
  • 10
  • 1
    You can also use 'float: left' instead of 'display: inline-block'. Then you don't need 'vertical-align. However I would recommend to use inline-block. Read more about differences here: http://stackoverflow.com/questions/11805352/floatleft-vs-displayinline-vs-displayinline-block-vs-displaytable-cell – matcygan Apr 08 '15 at 19:54