Как сделать элементы в одной строке [CSS]

Question

Я хотел поставить коробку 1 в ту же строку с полем 2. В следующем поле кода 2 находится в поле 1. Я хочу знать, как исправить эту проблему.

#container { 
background-color: #999; 
margin: 0px auto; 
width: 1000px; 
height: 620px; 
z-index: 1; 
} 
#box1 { 
background-color: #0F3; 
width: 530px; 
height: 75px; 
display:inline-block; 
z-index: 1; 
margin-top: 0px;  
margin-left: 0px; 
} 
#box2 { 
display:inline-block; 
background-color: #00F; 
width: 470px; 
height: 75px; 
z-index: 1; 
margin-top: 0px; 
margin-left: 530px; 
} 
<div id="container"> 
<div id="box1"></div> 
<div id="box2"></div> 
</div> 

Answer 1

Просто используйте дисплей inline-block: LIVE DEMO

Также нет необходимости устанавливать margin-left для box2. Вы можете удалить его.

И если есть проблема разрыва между строчными элементами вы можете проверить эту статью:
How to remove the space between inline-block elements?

Answer 2

Ваш код является правильным, но кроме этого:

#box2 { 
    ... 
    margin-left: 530px; 
} 

он вычисляет значение маржи от права сторона коробки1. Но вы думаете, что он вычисляет из окна или контейнера div.

Изменить его как;

#box2 { 
    ... 
    margin-left: 0; 
}