Блог

Итак, у меня есть два больших раздела, я хочу, чтобы один был главной панелью, а другой — боковой панелью справа. Я пытался заставить их оба перемещаться влево, также пытался использовать проценты ширины, но я не мог этого понять. Может быть, вы, ребята, можете? Это HTML-код:

 <div class="container box" style="clear:both !important;">
</div>
<div class="sidebar sidebarbox" style="clear:both !important;">
</div>
  

Тогда это CSS:

 .box {
    background-color: rgba(224, 222, 217, 0.25);
    -moz-box-shadow: 0 0 10px #1a1a18;
    -webkit-box-shadow: 0 0 10px #1a1a18;
    box-shadow: 0 0 10px #1a1a18;
    border: 1px solid #ffffff;
    margin-top:25px;
}
.container {
margin-left: auto;
margin-right: auto;
float: left;
width: 60%;
padding: 20px;
background-color: none;
border: 1px solid #C9C7C8;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
min-height: 450px;
}
.sidebar {
float: left;
width: 20%;
padding: 20px;
background-color: none;
border: 1px solid #C9C7C8;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
    margin-right:10px;
min-height: 450px;
}
.boxsidebar {
    background-color: rgba(224, 222, 217, 0.25);
    -moz-box-shadow: 0 0 10px #1a1a18;
    -webkit-box-shadow: 0 0 10px #1a1a18;
    box-shadow: 0 0 10px #1a1a18;
    border: 1px solid #ffffff;
    margin-right:10px;
}
  

Кто-нибудь может это понять? Я был бы очень признателен за помощь.

У вас есть встроенный стиль (установленный на важный), который переопределяет значение с плавающей точкой.

Установите ваш html на:

 <div class="container box">
</div>
<div class="sidebar sidebarbox">
</div>
<div style="clear:both;"></div>
  

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

Если я правильно понимаю, вы хотите, чтобы box был основным контейнером содержимого, а боковая панель находилась справа от элемента box.

Все, что вам нужно, это:

HTML

 <div class="container box">
</div>
<div class="sidebar sidebarbox">
</div>
  

CSS

 .box {
background-color: rgba(224, 222, 217, 0.25);
-moz-box-shadow: 0 0 10px #1a1a18;
-webkit-box-shadow: 0 0 10px #1a1a18;
box-shadow: 0 0 10px #1a1a18;
border: 1px solid #ffffff;
margin-right: 10px;
}
.container {
float: left;
width: 60%;
padding: 20px;
border: 1px solid #C9C7C8;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
min-height: 450px;
}
.sidebar {
float: left;
width: 20%;
border: 1px solid #C9C7C8;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
min-height: 450px;
}
.boxsidebar {
background-color: rgba(224, 222, 217, 0.25);
-moz-box-shadow: 0 0 10px #1a1a18;
-webkit-box-shadow: 0 0 10px #1a1a18;
box-shadow: 0 0 10px #1a1a18;
border: 1px solid #ffffff;
}
  

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

Надеюсь, это поможет.