I have a fixed header and my content is sliding behind the header. How would I stop the content from sliding behind it.
To put it phiscially the content and the fixed menu are to pieces of paper. They are carrently behaving as if they are on different planes how would I put them on the "same plane" as if on a table. The second paper should not go under the first.
Try putting
Clear:both;
in the content div(the div sliding behind the header)
If the header is fixed like you say, put the margin top on the content div to the height of the header.
So to put this simply:
<div class='header'>
</div>
<div class='content'>
</div>
CSS
.header{
position:fixed;
width:100%;
height:100px;
}
.content{
margin-top:100px;
}
Related
I'm using Bootstrap 3 and I'm trying to make a scrollable content DIV.
I have a grid with a left side navigation and a top bar and in the
middle I have the content that should be scrollable.
It works when I use a fixed height on the content div...but I want
to use 100% instead.
<div class="col-lg-12 col-md-12 col-sm-12" style="height:100%;overflow-y:auto;">
some content...
</div>
CSS:
html,body
{
height:100%;
overflow:hidden;
}
How could I get this to work with height:100%;
Thanks!
You can add pre-scrollable class for the div you want to scroll.
If you search the .css there is a max-height but you cant edit. So you have sure it will maximize the page in the window for that max value.
Hope it helps, i used the same for a one-page with scrollable divs.
How can I change the menu here so that it's always there when the user scrolls down the page?
What code do I need to add/ remove/ replace and where?
Your HTML isn't good. You didn't close your <section id="header" class="clearfix"> and many more. Run your page throught HTML validator, it will tell you your errors.
As for your question, just add:
#header{
position:fixed;
}
In your CSS file (style.css).
More about positions : MDN positions.
here is an example of a div which stays in the same position at all times on the screen.
To fix an element you can use the position fixed, and then position the element on the visible browser window by using the css top, bottom, right and left.
in this example it is fixed to top left, and has a height of 25px
<body>
<div style="position:fixed; top:0; left:0; height:25px; width:100%;">
Here you will get a bar which is fixed to the top left experiment to get your desired effect
</div>
</body>
Simple solution for your case is to use
<section id="header" style="position:fixed;" class="clearfix">
and add a
</section>
before the
<!-- header ends --!>
I've got myself into a bit of predicament where I have a fixed width site, but need two fluid width bars to go 100% across the screen. I'm using a rather horrible wordpress template for the site in question, that every time you save any settings it saves the content width as per its settings. In this case it's 900px.
Thing is I'm happy with the whole site being 900px, it's just a header bar and footer bar that I need 100%, even the elements inside these bars can be 900px, I just need the colour to extend to each side of the screen.
The site in question is http://mysterybox.co/ You can see from the image below which bar I need extended out. If anyone could point me in the right direction that would be great.
Just create a new container for both your header and footer and take them out of your #container div. Something like this will work:
HTML
<div class="header-wrapper">
<div id="headerwidth">
....
</div>
</div>
<div class="footer-wrapper">
<div id="footer">
....
</div>
</div>
CSS
.header-wrapper, .footer-wrapper {
background-color:#000;
margin:30px 0 40px;
}
#headerwidth, #footer {
width:900px;
margin:0 auto;
}
I have a centered container layout with a right fixed nav div. To make the fixed nav stay in place when viewport resizes it's set up in some nested divs. Problem is the nav div ends up infront of the content. I can change the z-index order but I want both content and nav to be accesible as in being able to "mark" text for example. Any ideas on this? Below is link to code and and an image showing the layout structure
http://jsbin.com/aliru5/3/edit
You are making this more complicated than it needs to be, try this:
<div id="container">
<div id="content"></div>
<div id="nav"></div>
</div>
#container {
margin:0 auto; /* center container in browser */
overflow:hidden; /* clear floats */
width:900px
}
#content {float:left;width:640px}
#nav {float:right;width:240px}
http://69.65.3.168/~doubleop/pro.sperity/
The content and footer are both in a div (#left) and the sidebar is in (#right)
#left{
width:685px;
float:left;
overflow:visible;
}
#right{
width:215px;
float:left;
margin-top:20px;
}
The footer is 900px; wide, which is why i set #left to overflow:visible, so you could see it. I am doing this because i want the sidebar to overlap the footer when the content area has small amount of content. Obviously, when the content area expands, the sidebar will remain in the same place, but the footer will be pushed down. Al this gives me a nice overlap effect.
However, IE 6 doesnt like this, and it pushes the sidebar under neath the footer.
If i change #left property to overflow:hidden, the sidebar appears in the right place, but the footer is cut off. So the problem lies within the overflow:hidden part.
Does any one know what i can do to work around this?
Just place your #footer after #right div.
<div id="left">
</div>
<div id="right">
</div>
<div style="clear: both;"></div>
<div id="footer">
Yeap. You're going to need to do a "clear:both" on the footer. Your right hand float is out of the flow of the page and the footer doesn't know that anything is above it. Clearing both will bascially turn off the floating making the footer think that something is above it, which will in turn push it to the bottom where it belongs.