Ok so on my webpage, I have a left navigation, the position if fixed and when i want to add my content on the index page, the content appears behind the navigation and does not start after it.
If I remove the fixed position then it just goes underneath.
Navigation CSS
#nav {
height: 100%;
width: 18%;
background-color: #1C1C1C;
position: fixed;
}
I even tried putting all the content inside a div but no luck.
Content DIV
#padding {
height: auto;
position: absolute;
right: 0;
Screenshots
Just put your content inside a div:
<div id="container">
<div id="nav">
<!-- your navbar markup -->
</div>
<div id="content">
<!-- your content -->
</div>
</div>
with css you can style your elements:
#container {
width: 100%;
}
#nav {
height: 100%;
width: 18%;
background-color: #1C1C1C;
float: left;
}
#content {
width: 82%;
float: left;
}
With float: left your two divs appears aside.
NOTE:
If you don't want to put your content inside a div element, so just float your navbar element:
#nav {
height: 100%;
width: 18%;
background-color: #1C1C1C;
float: left;
}
...that's all and all following content appears (if possible) on the right side of your navbar.
I would do margin-left:18%; or slightly higher on a container around your content. Then your content container will always be padded where the nav sits and will appear beside it.
Related
I am trying to setup an HTML document that has a fixed position header bar that will contain all of the menu options for the app; The bar should be fixed to the top of the page. The actual content portion of the bar should have a minimum width of 1000px and should be contained within a wrapper that will fill all remaining space if the page with is >1000px, leaving the content portion centered within.
I have been able to do the following, using a display: fixed I can get the bar to stick to the top of the page when scrolling verticaly, but if the page is <1000px, horizontal scrolling does not reveal the rest of the bar, it sticks to its fixed 0,0 position.
Changing to display: relative, The bar behaves as expected when scrolling horizontally - I can see the right half of it - however this does not allow it to stay fixed to the top of the document when scrolling vertically. How can I adjust the following such that the bar behaves in this way.
HTML:
<!-- Page Wrapper -->
<div id="wrapper">
<!-- Navigation -->
<div id="nav_wrapper">
<!-- Navigation Wrapper -->
<div id="nav_content">
<!-- Navigation Title -->
<div id="nav_title">
some content
</div>
</div>
</div>
<!-- Body -->
</div>
Navigation Bar css:
#wrapper {
display: block;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 150%;
min-width: 1000px;
}
#nav_wrapper {
display: block;
position: fixed;
width: 100%;
height: 48px;
top: 0px;
left: 0px;
min-width: 1000px;
}
#nav_content {
display: block;
position: relative;
top: 0px;
width: 1000px;
margin-left: auto;
margin-right: auto;
}
Again, setting the nav_wrapper display style to fixed allows me to scroll vertically with the bar sticking to the top but does not allow me to scroll horizontally to view overflow content,
Setting it to relative allows me to scroll horizontally to view the overflow content of the bar but does not allow the bar to stick to the top of the page when I scroll vertically, I am looking to be able to do both.
Any and all help is greatly appreciated. Cheers.
Here is something working on jsFiddle
Edit
Maximillian posted an excellent working example with the behavior I am hoping to achieve, however using javascript. I am looking for a pure HTML / CSS solution if possible.
I'm pretty sure that you can't get fixed position divs to scroll along with the window by using pure HTML and CSS, so here is a JavaScript solution.
Live Demo:
var nav_wrapper = document.getElementById("nav_wrapper");
window.onscroll = function() {
nav_wrapper.style.left = -pageXOffset + "px";
};
#wrapper {
display: block;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 150%;
min-width: 1000px;
background: gray;
}
#nav_wrapper {
display: block;
position: fixed;
width: 100%;
height: 48px;
top: 0px;
left: 0px;
min-width: 1000px;
background: blue;
}
#nav_content {
display: block;
position: relative;
top: 0px;
width: 1000px;
margin-left: auto;
margin-right: auto;
background: red;
}
<!-- Page Wrapper -->
<div id="wrapper">
<!-- Navigation -->
<div id="nav_wrapper">
<!-- Navigation Wrapper -->
<div id="nav_content">
<!-- Navigation Buttons -->
<div id="nav_main">
Buttons
</div>
<!-- Navigation Title -->
<div id="nav_title">
Title
</div>
<!-- Navigation Options -->
<div id="nav_options">
Options
</div>
</div>
</div>
<!-- Body -->
</div>
JSFiddle Version: https://jsfiddle.net/2j2mx5mu/
Let me know if this fixes your issue:
https://jsfiddle.net/nkf00r7L/4/
I changed the following css:
#wrapper {
display: block;
top: 0;
left: 0px;
width: 100%;
height: 2000px;
min-width: 1000px;
background-color: #DDDDDD;
}
#nav_wrapper {
display: block;
position: fixed;
width: 100%;
height: 48px;
top: 0px;
left: 0px;
min-width: 1000px;
background-color: #000000;
}
Updated:
I noticed you wanted it to scroll horzontally!! I've added overflow: scroll on the wrapper.
https://jsfiddle.net/nkf00r7L/5/
I am trying to create a website,but the sidebar is not aligning to the main content of the website and is overlapping another div.
Link to the website http://www.inseeks.com/
.site-main .sidebar-inner {
margin: 6px auto;
position: absolute;
top: 0;
}
Try placing your .sidebar-inner inside your #content
<div id="content" class="site-content" role="main">
<div class="sidebar-inner">
Then float it to the right.
.sidebar-inner {
float: right;
//add necessary paddings or margins.
}
Remove the position: absolute; on .site-main .sidebar-container
Change width: 100%; to width: 300px;
Add float: right;
Add the following style to the css.
#primary
{
float: left;
}
That above should change so the sidebar will be on the left and no longer be overlapping the other content.
Here is my JSFiddle thus far.
What should I do to make sidebar stretch vertically (height) on the entire page? Right now it stretches to the original height of web browser window, but when there is more content inside the container, the sidebar does not stretch with it.
HTML:
<div class="main-content">
<div class="sidebar">
menu
</div>
<div class="content">
... a bunch of content ...
</div>
</div>
CSS from the above JSFiddle:
html, body {
width: 100%;
height: 100%;
}
.main-content {
width: 100%;
height: 100%;
}
.sidebar {
width: 100px;
float: left;
background-color: #000;
color: #fff;
min-height: 100%;
}
.content {
width: 200px;
float: left;
}
I don't think there is a "pure" css solution for this issue. The problem is that your sidebar is 100% height of it's parent container. And it's parent container main-content is 100% height of it's parent (the window). So for your content to be the same height as main-content's inner content you would then have to set a pixel height value to main-content.
However you could easily resolve this with jquery.
var sidebar = $('.sidebar');
var content = $('.content');
if (content.height() > sidebar.height() )
sidebar.css('height', content.height());
else
sidebar.css('height', sidebar.height());
Fiddles:
http://jsfiddle.net/up7Zg/29/ and http://jsfiddle.net/up7Zg/30/
try this
.sidebar {
position: absolute;
top: 0;
bottom: 0; /* this line, and the one above, confer full-height */
left: 0;
width: 30%;
background-color: #f90; /* adjust to taste, just to see where the element was rendered */
}
I've found a method of placing the footer that I like, except for the fact that footer overlaps the content when the page resizes.
Using the structure and formatting I have already, how can I "clear" the footer, so that it drops off when the page resizes (avoiding an overlap of #content)?
I've tried clear: left and that does nothing for this.
Essentially, I want the footer to always be visible, and attached to the lower left of the window, as long as space allows; however, when the window gets smaller, I don't want the footer to overlap my content.
CSS:
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
background-size: cover;
margin: 0;
height: 100%;
}
#wrapper {
min-height: 100%;
height: 100%;
min-width: 900px;
overflow: hidden;
}
.main_nav {
margin: 0;
width: 160px;
float: left;
padding-left: 40px;
overflow: hidden;
}
#content {
float: left;
width: 750px;
height: 600px;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
height: 50px;
}
HTML:
<body>
<div id="wrapper">
<div id="header">
<h1></h1>
<ul class="main_nav">
<li></li>
</ul>
</div>
<div id="content">
</div>
</div>
<div id="footer">
<div id="footer_content"></div>
</div>
</body>
The answer has been already choosen, but i wanted to give an alternative.
The "wrapper" contains "header" and "content", while the "footer" is outside of it. You could, for example, add
z-index:10;
to the wrapper's css and
z-index:1;
to the footer's css.
This one last isn't really needed, but it's for completeness. This way, whenever they get in "touch", the one with higher z-index will remain on foreground (ie, higher level on the z-axis, that is the axis perpendicular to the screen surface) and the other elements will slide behind, according to their own index.
This problem is because of width. You width is different in each case i.e. in content , footer & wrapper as well. I created a jsfiddle
[http://jsfiddle.net/jvaibhav/xncuF/37/]
try this.
recently I have tried to achieve a navigation bar that has two sides, one on the right and one of the left, they are separated (not same div). I have managed to get the two navigation bars to work but my problem is that when the browser window is smaller then the wrapper (1000px) the right side of the navigation bar will not stick to the right side instead it will be somewhere in the center.
My code until now
css
div.wrapper
{
min-width: 1000px;
}
div.menul
{
float: left;
width: 880px;
padding: 15px;
background-color: red;
}
div.menur
{
position: absolute;
right: 0;
z-index: 999;
width: 250px;
padding: 15px;
background-color: yellow;
}
html
<div class="wrapper">
<div class="menul">
menu
</div>
<div class="menur">
menu
</div>
</div>
help would be appreciated, thank you
Simply add position: relative to the #wrapper CSS. This will cause the right menu to be positioned relative to the #wrapper rather than the page itself
[Example]