0
Я сделал боковую панель, которая позиционируется как закрепленная на левой стороне экрана. Тогда, когда проблема возникает, «первая» часть контекста прекрасна, только когда я пытаюсь добавить вторую секцию контекста, она в основном сидит точно на первой части вместо того, чтобы идти под нее. Я пробовал другое позиционирование, но он всегда либо сверху, либо слева от экрана, игнорируя боковую панель. Поэтому мой вопрос заключается в том, как получить второй раздел для продолжения в первом разделе и в третьем разделе, а затем, конечно, следовать по тому же пути. Заранее спасибо.Разделы DIV, перекрывающие друг друга
body{
background-color: #fdfdfd;
font-family: Arial, "Open Sans", sans-serif-light, sans-serif, "Segoe UI";
}
#wrapper {
width: 100%;
height: 100%;
}
#sidebar{
background-color: #212528;
position: fixed;
width: 20%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
}
#nav{
color: #DADADA;
display: block;
max-width: 100%;
}
#nav ul {
padding-left: 0;
}
#nav li{
list-style-type: none;
margin: 0;
padding: 0.75em 0 0.75em 0;
text-align: center;
max-width: 100%;
}
#nav li:hover {
background:#333;
}
#nav li a {
display: block;
padding: 0.5em 0;
}
.link{
text-align: right;
margin-right: 25%;
letter-spacing: 1px;
}
#welcometext{
text-align: center;
font-style: italic;
text-transform: uppercase;
font-size: 1em;
margin-top: 2em;
}
#searchbar{
width: 70%;
margin-left: auto;
margin-right: auto;
padding: 1em 1em 0.5em 1em;
text-align: right;
}
#searchbar input{
max-width: 95%;
}
#sectionone {
position: fixed;
top: 0;
right: 0;
width: 80%;
}
#containerone {
margin-top: 0;
width: 80%;
height: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
border-bottom: 2px solid #DADADA;
box-shadow: inset 0 -6px 0 0 #fdfdfd, inset 0 -8px 0 0 #DADADA;
}
#header{
margin: 6em 0 6em 0;
}
#logo h1 {
color: #ed786a;
text-shadow: 0.1em 0.1em 0 rgba(0,0,0,0.1);
letter-spacing: 13px;
}
#logo p {
margin-top: -0.6em;
color: #888888;
letter-spacing: 4px;
font-size: 0.85em;
}
#sectiontwo{
float: ;
width: 80%;
top: 0;
right: 0;
}
#containertwo{
width: 80%;
height: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
}<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Lakeside Books</title>
<link rel="stylesheet" type="text/css" href="masterstyle.css">
<meta name="viewsize" content="width-device-width,initial-scale=1.0">
<!--[if IE]>
<script type="text/javascript" src="_http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="sidebar">
<nav id="nav">
<h3 id="welcometext">Welcome To<br>Lakeside Books</h3>
<div id="searchbar">
<form action="http://www.example.com/search.php">
<input type="text" name="search" placeholder="...Search Book Title"/>
</form>
</div>
<ul>
<li>
<a class="link">
Home
</a>
</li>
<li>
<a class="link">
Categories
</a>
</li>
<li>
<a class="link">
Bestsellers
</a>
</li>
<li>
<a class="link">
Contact
</a>
</li>
</ul>
</nav>
</div>
<div id="sectionone">
<div id="containerone">
<div id="header">
<div id="logo">
<h1>LAKESIDE BOOKS</h1>
<p>KERRYS LOCAL BOOKSTORE</p>
</div>
</div>
</div>
</div>
<div id="sectiontwo">
<div id="containertwo">
<h2>Best Selling Books Right Now</h2>
</div>
</div>
</div>
</body>
</html>Изображение проблемы - http://i.imgur.com/g9ur5eS.png
Просто догадка, но попробуйте использовать дисплей: блок; на ваших divs –
divs уже являются элементами блока @DaveBurns – Aaron
Вы хотите, чтобы ваши «боковые панели» и «секционные» оставались в поле зрения при прокрутке страницы? –