Как поставить два деления рядом

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

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

Мне также нужна помощь с шириной заголовка моего сайта. Прямо сейчас это выглядит так, как будто заголовок не помещается на странице, вызывая горизонтальную прокрутку. Вроде как это:

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

Ответы

Ответ 1

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

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;
}

<div id="header"></div>
<div id="container">
    <div id="first"></div>
    <div id="second"></div>
    <div id="clear"></div>
</div>

Ответ 2

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

<div style="width:800px;">
  <div style="width:300px; float:left;"></div>
  <div style="width:300px; float:right;"></div>
</div>

Ответ 3

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

Ответ 4

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

<style>
.wrapper {
  width: 980px;
}
</style>

<body>
  <div class="wrapper">
    //everything else
  </div>
</body>

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

<style>
.boxes {
  display: inline-block;
  width: 360px;
  height: 360px;
}
#leftBox {
  float: left;
}
#rightBox {
  float: right;
}
</style>

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

Ответ 5

Это простой (не отвечающий) перевод HTML/CSS предоставленного вами каркаса.

HTML

<div class="container">

  <header>
    <div class="logo">Logo</div>
    <div class="menu">Email/Password</div>
  </header>

  <div class="first-box">
    <p>Video Explaning Site</p>
  </div>

  <div class="second-box">
    <p>Sign up Info</p>
  </div>

  <footer>
    <div>Website Info</div>
  </footer>

</div>

CSS

.container {
  width:900px; 
  height: 150px;
}

header {
  width:900px; 
  float:left; 
  background: pink; 
  height: 50px;
}

.logo {
  float: left;
  padding: 15px
}

.menu {
  float: right;
  padding: 15px
}

.first-box {
  width:300px; 
  float:left; 
  background: green; 
  height: 150px;
  margin: 50px
}

.first-box p {
  color: #ffffff;
  padding-left: 80px;
  padding-top: 50px;
}

.second-box {
  width:300px; 
  height: 150px; 
  float:right; 
  background: blue;
  margin: 50px
}

.second-box p {
  color: #ffffff;
  padding-left: 110px;
  padding-top: 50px;
}

footer {
  width:900px; 
  float:left; 
  background: black; 
  height: 50px;
  color: #ffffff;
}

footer div {
  padding: 15px;
}

Ответ 6

<div style="display: inline">
    <div style="width:80%; display: inline-block; float:left; margin-right: 10px;"></div>
    <div style="width: 19%; display: inline-block; border: 1px solid red"></div>
</div

Ответ 7

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

HTML

<div id="header"> LOGO</div>
<div id="wrap">
<div id="box1"></div>
<div id="box2"></div>
<div id="clear"></div>
</div>
<div id="footer">Footer</div>

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;
}