Как поставить две бок о бок

Поэтому я довольно новичок в написании кодов (около нескольких недель), и я ударил стену, набирая коды для своего сайта. Я хочу иметь такой макет, как этот

Образ но не может понять, как поставить два бокса бок о бок (в одном окне появится видео, объясняющее мой сайт, а другой – регистрационная форма для регистрации). Я хочу, чтобы они были рядом друг с другом, дюймовое разделение между коробками.

Мне также нужна помощь по ширине моего сайта? Сейчас похоже, что заголовок не помещается на странице, вызывая горизонтальную прокрутку. Как это похоже

Образ Я хочу, чтобы весь сайт выглядел так, как будто все это одна большая коробка, и я хочу, чтобы весь контент внутри коробки. Может кто-нибудь, пожалуйста, помогите мне? Очень признателен. Заранее спасибо.

Это довольно просто:

http://jsfiddle.net/kkobold/qMQL5/

 

 #header { width: 100%; background-color: red; height: 30px; } #container { width: 300px; background-color: #ffcc33; margin: auto; } #first { width: 100px; float: left; height: 300px; background-color: blue; } #second { width: 200px; float: left; height: 300px; background-color: green; } #clear { clear: both; } 

это будет работать

 

Взгляните на CSS и HTML в глубину, вы поймете это. Он просто плавает ящики слева и справа, и эти ящики должны находиться внутри одного и того же div. http://www.w3schools.com/html/html_layout.asp может быть хорошим ресурсом.

Что касается ширины вашего веб-сайта, вы захотите рассмотреть возможность использования classа-оболочки для окружающего вашего контента (это должно помочь ограничить ширину ваших элементов и предотвратить их расширение слишком далеко за пределами содержимого):

   
//everything else

Что касается ящиков контента, я бы предложил попробовать использовать

  

Я бы потратил некоторое время на исследование модели box-object и всех свойств «display». Они всегда будут полезны. Обратите особое внимание на «встроенный блок», я использую его практически каждый день.

На основе макета, который вы указали, вы можете использовать свойство float left в css.

HTML

  

CSS

 body{ margin:0px; height: 100%; } #header { background-color: black; height: 50px; color: white; font-size:25px; } #wrap { margin-left:200px; margin-top:300px; } #box1 { width:200px; float: left; height: 300px; background-color: black; margin-right: 20px; } #box2{ width: 200px; float: left; height: 300px; background-color: blue; } #clear { clear: both; } #footer { width: 100%; background-color: black; height: 50px; margin-top:300px; color: white; font-size:25px; position: absolute; }