Jak dodać element do dokumentu nie zmieniając położenia innych.

Cześć,

Mam taki problem z CSS:

	<section>

		<article>
			
		</article>
		<nav>
			<div id="navButton"></div>
		</nav>
	</section>

article {
	background-color: white;
	width: 50%;
	display: inline-block;
	margin-left: 5%;
	margin-top: 1%;
	margin-bottom: 1%;
	text-align: center;
	
	border-radius: 5px;
}

nav {

	background-color: blue;
	width: 25%;
	display: inline-block;
	margin-left: 10%;
	margin-top: 1%;
	margin-bottom: 1%;
	
	border-radius: 5px;;
}

Problem w tym, że gdy chcę np. dodać tabele do sekcji article to sekcja nav przesuwa mi się w dół co jest dziwne bo mam ustawione "display: inline-block". Wie ktoś jak temu zaradzić?

Korzystaj z narzędzi dla webdeweloperów. Są wbudowane w przeglądarkę. Oczywiście mówię tu o przeglądarkach firefox i chrome, na nowej operze nie wiem czy cokolwiek jest a ie ma cienkie. To, że coś sądzisz, że ma tak być nie znaczy, ze będzie. Interfejs stron jest dość porąbany i różne kwiatki mogą się robić.

Dobra rozwiązałem ten problem za pomocą chrome dev tools.

Ale mam jeszcze jedno pytanie.

Bo moja tabela z formularzem i polami zmienia swoją szerokość jak zmniejszam okno ale tylko do pewnego stopnia, później jej szerokość już się nie zmienia.

#taskCreator {

	font-size: 1.2em;
	margin-left: 1%;
	margin-right: 1%;
	margin-top: 2%;
	margin-bottom: 2%;
	
	border-radius: 2px;
}

#taskCreator td {
	width: 100%;
}

#taskCreator tr {
	width: 100%;
}

#taskCreator input {
	width: 98%;
	font-size: 1.1em;
}

<form>
    <table id="taskCreator" border="2">
					
			<tr><td>Title: </td><td><input required type="text" ng-model="task.title"/></td></tr>
			<tr><td>Description: </td><td><textarea rows="2" cols="25" ng-model="task.description"></textarea></td></tr>
			<tr><td>Start Date: </td><td><input type="date" ng-model="task.startDate"/></td></tr>
			<tr><td>End Date: </td><td><input type="date" ng-model="task.endDate"/></td></tr>
			<tr style="text-align: center;"><td><input  type="Button" value="Send" ng-click="createTask()"/></td></tr>
    </table>
</form>

Wie ktoś w czym problem?

Tak działa tabelka. Gdzieś content musi być.