Content not moving around wrapper div
Question
I'm trying to structure a page such that there's a horizontal navigation bar at the top that all the other content on the page starts under (the navigation bar is fixed at the top, but the content isn't necessarily), and a side bar that all content should start to the right of (which is fixed at the left).
Here's a link to the jsfiddle, showing what I've tried: https://jsfiddle.net/o5p8yuvx/5/ .
This doesn't work as intended however. The content starts under topbar but not to the right of sidebar (I've commented out sidebar to show that it sits under topbar ; taking it out of the comment block will illustrate that it does not sit to the right of sidebar ). I want arbitrary text outside both wrappers to sit in the empty part of the page that is not occupied by either bar (the big white space under topbar and to the right of sidebar ), but currently it just sits underneath topbar . Since they're both wrappers, why is it only sitting under topbar , not sitting under topbar and sitting right of sidebar ?
This is just an example however; other divs with content in them cause the same issue. How do I make all further content sit outside the bars, just like sidebar sits under topbar ?
2 answers
solution1
0 2020-02-25 18:02:01
Since you are using 2 fixed properties, you will need to declare how far from the top to set the sidebar. You can fix this with 1 line in your css to say how far from the top of the parent container you want your div to be:
.sidebar {
...
top: 60px;
}
I used 60px because that is the size of your topbar. If the top bar changes, you can adjust the sidebar location accordingly. Here's an updated fiddle
The browser defaults to top: auto so that the browser dictates where these items should be, even if it they are wrapped like you have it.
If position: absolute; or position: fixed; - the top property sets the top edge of an element to a unit above/below the top edge of its nearest positioned ancestor.
Because of this, the css starts looking above to the next "positioned ancestor" and uses this as a reference of where the top should be
solution2
0 ACCPTED 2020-02-25 18:14:38
It would be best to create a new <div> specifically for the content:
<div class="content">
arbitrary text
</div>
Then, you can position the <div> , so that it fills the remaining space:
.content {
margin: 0 0 0 300px;
}
body { margin: 0; } .topwrapper { height: 60px; } .sidewrapper { width: 300px; } .topbar { background-color: grey; position: fixed; width: 100%; height: 60px; margin: 0; } .topbar ul { list-style-type: none; } .topbar li { color: blue; } .topbar a:hover { background-color: black; } .sidebar { background-color: black; position: fixed; width: 300px; height: 100%; margin: 0; } .sidebar ul { list-style-type: none; } .sidebar li { color: blue; } .sidebar a:hover { background-color: white; } .content { margin: 0 0 0 300px; }
<!DOCTYPE HTML> <html> <head> <title>Webpage</title> </head> <body> <div class="topwrapper"> <div class="topbar"> <ul> <li><a style="float: left">Link 1</a></li> <li><a style="float: left">Link 2</a></li> <li> <p style="float: right">Welcome</p> </li> </ul> </div> </div> <div class="sidewrapper"> <div class="sidebar"> <ul> <li><a>Link 3</a></li> <li><a>Link 4</a></li> <li> <p>Welcome</p> </li> </ul> </div> </div> <div class="content"> arbitrary text </div> </body> </html>
I have also provided a jsfiddle .
If you want your code to be semantically correct, you can use <main> instead of <div class="content"> , then change your css to...
main {
margin: 0 0 0 300px;
}
body { margin: 0; } .topwrapper { height: 60px; } .sidewrapper { width: 300px; } .topbar { background-color: grey; position: fixed; width: 100%; height: 60px; margin: 0; } .topbar ul { list-style-type: none; } .topbar li { color: blue; } .topbar a:hover { background-color: black; } .sidebar { background-color: black; position: fixed; width: 300px; height: 100%; margin: 0; } .sidebar ul { list-style-type: none; } .sidebar li { color: blue; } .sidebar a:hover { background-color: white; } main { margin: 0 0 0 300px; }
<!DOCTYPE HTML> <html> <head> <title>Webpage</title> </head> <body> <div class="topwrapper"> <div class="topbar"> <ul> <li><a style="float: left">Link 1</a></li> <li><a style="float: left">Link 2</a></li> <li> <p style="float: right">Welcome</p> </li> </ul> </div> </div> <div class="sidewrapper"> <div class="sidebar"> <ul> <li><a>Link 3</a></li> <li><a>Link 4</a></li> <li> <p>Welcome</p> </li> </ul> </div> </div> <main> arbitrary text </main> </body> </html>
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.