DIV Sections Overlapping One Another
Question
I have made a sidebar which is positioned as fixed to the left-hand side of the screen. Then where the issue comes in is the 'first' section of context is fine just when I try to add the second section of context, it basically sits its exactly on top of the first section instead of going under it. I have tried different positioning but it's always either on top of it or to the left of the screen ignoring the sidebar. So my question is, how do I get the second section to continue under the first section and the third section then of course to follow on the same way. Thanks in advance.
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>
Image of the problem - http://i.imgur.com/g9ur5eS.png
2 answers
solution1
0 ACCPTED 2015-04-20 15:23:21
Based upon the answer to my comment, you don't want sectionone to have position:fixed; . I have put /* ### */ next to CSS I have added, and commented out anything that needs removing.
Basically I've added some resetting rules to html/body and then added a 20% left margin to the wrapper . The other elements just flow next to it naturally.
html, body { /* ### */ margin:0; padding:0; height:100%; width:100%; } body { background-color: #fdfdfd; font-family: Arial, "Open Sans", sans-serif-light, sans-serif, "Segoe UI"; } #wrapper { width: 100%; height: 100%; margin:0 0 0 20%; /* ### */ } #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; }
<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>
solution2
0 2015-04-20 15:26:11
If you contain the <div id="sectionone"> and <div id="sectiontwo"> in a wrapping tag and apply the nav width as padding to this wrapper, then remove the fixed position from those two divs you should get what you're looking for.
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%; } .content { padding-left: 20%; } #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; } #containertwo{ width: 80%; height: 100%; margin-left: auto; margin-right: auto; text-align: center; }
<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> <section class="content"> <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> </section> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
content of one div overlapping to another div
How can I prevent one div from overlapping another on resize?
How to make 2 overlapping <div>s to be shown after one another by clicking a href and a button from another <div>?
Stop background color of one div covering the content of another, rotated and thus overlapping, div
Determine if one node is overlapping another
Overlapping of one string into another string highlighting issue
Replacing one div with another
Fading one div into another
How to position two sections one under another correctly?
How to divide 1 div into 3 sections
Related Tags