I am trying to create sidebar. Well, the design is supposed to be 3 divs. Header (Which is already done), Sidebar, and the main div.
The sidebar is intended to be on the left side on the screen, extending all the way down to the bottom (height:100%). The problem I am stuck at is that I am not able to make a 100% Div as its height only extends to the number of lines of text I have in the div.
Here is the CSS for the sidebar that I currently have:
#sidebar {
float: left;
margin-top:36px;
width: 300px;
height:100%;
background-color: #111211;
}
Here is the CSS code for the body that I currently have:
body {
margin:0;
padding:0px;
background-color:#87AFC7;
}
Here is the HTML code:
<body>
<div id="sidebar"> left-sidebar </div>
</body>
You need to set the height of the parent of the sidebar to 100%, and in turn the parent of that. Since the sidebar is an immediate child of the body element, just add this to your CSS:
html,body { height:100%; }
You may try something like;
CSS
#container {
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
#top, #left, #right {
position: absolute
}
#top {
top: 0;
width: 100%;
height: 50px;
background: #00b7f0
}
#left {
top: 50px;
width: 50px;
bottom: 0px;
background: #787878
}
#right {
top: 50px;
left: 50px;
right: 0;
bottom: 0px;
background: #ff7e00
}
HTML
<div id="container">
<div id="top"></div>
<div id="left"></div>
<div id="right"></div>
</div>
Here is a working Live Demo.
Hope this helps..
Please try this and let me know
#sidebar {
position:fixed;
right:0px;
margin-top:36px;
width: 300px;
height:100%;
background-color: #111211;
}
body, html {
hieght:100%
}
You can use pixels instead of percentages:
height:1000px;
Related
http://jsfiddle.net/P8g3C/
I am trying to create the layout above. I am not getting the scroll bar to the right side of the content.
Also, suggest if there is any alternate way which better than my current approach
My html code is
<div class="header"></div>
<div class="content">
<div class="content-left">Menu</div>
<div class="content-right">Content which should be scrollable</div>
</div>
<div class="footer"></div>
My CSS is
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.header {
position: fixed;
width: 100%;
height: 100px;
top: 0;
left: 0;
background-color: aqua;
}
.content {
position: fixed;
top: 100px;
bottom: 35px;
left: 0;
width: 100%;
}
.content-left {
position: absolute;
top: 0;
left: 0;
width: 200px;
height:100%;
background-color: aquamarine;
}
.content-right{
position:absolute;
top:0;
left:200px;
width:100%;
height:100%;
overflow:auto;
background-color:blanchedalmond;
}
.footer {
position: fixed;
width: 100%;
height: 35px;
bottom: 0;
left: 0;
background-color: yellow;
}
You can just remove width:100% of .content-right:
Update:
Because you use absolute positiong for the .content-right we can just set the left and right for it to make the width dynamic:
.content-right{
position:absolute;
top:0;
/* add this */
right:0;
left:200px;
height:100%;
overflow:auto;
background-color:blanchedalmond;
}
Demo.
It's because you are assigning a width of 100% to .content-right, yet already occupy 200px with the menu column, hence pushing the scrollbar off.
Try this:
.content-right {
width:calc(100% -200px);
}
Alternately, you can remove the width property altogether, as #King King suggested
Here's a Fiddle of your original demo code showing the fix in action.
Please correct a width of class .content-right{ width:61%;}. because you have give a width of 100% that why you are not able to see a overflow scroll.
I'm curious whether it's possible with CSS to have a <div> overlaying the <div> above and below, like so:
I've tried to use margin-top: -40px;, but that doesn't seem to work. I've tried position:relative; without any luck, either. Any ideas?
Thanks!
Sure!
Demo Fiddle
The trick is managing the positioning of your divs, then setting the offset (top) correctly for the div you want overlapping.
<div></div>
<div>
<div></div>
</div>
CSS
div {
width:100%;
height:100px;
position:relative; /* ensure the parent divs have a position set */
}
div:first-child {
background:red;
}
div:last-child {
background:blue;
}
div:last-child div {
opacity:.5;
height:50px;
background:white;
position:absolute; /* position relative to the parent */
top:-25px; /* position the top to -25px (half its height) above the top of the parent */
}
There are many ways to do this:
With all div's absolutely positioned
You can use position: absolute to achieve this. This is better if you are trying to build a web app as it sticks to the edges of the screen.
Fiddle here
HTML
<div id="top-section"></div>
<div id="banner-section"></div>
<div id="btm-section"></div>
CSS
div {
position: absolute;
left: 0;
width: 100%;
}
#top-section {
top: 0;
bottom: 50%;
background: red;
}
#btm-section {
top: 50%;
bottom: 0;
background: blue;
}
#banner-section {
height: 100px;
margin-top: -50px;
top: 50%;
background: rgba(255,255,255,0.5);
z-index: 2;
}
With the #banner-section relatively positioned
You mentioned that you tried relative position. This is how you can achieve what you were trying to do. In this case, you want the #banner-section to be nested inside the #btm-section:
Fiddle here
HTML
<div id="top-section"></div>
<div id="btm-section">
<div id="banner-section"></div>
</div>
CSS
#banner-section {
position: relative;
top: -50px;
height: 100px;
background: rgba(255,255,255,0.5);
}
With a negative margin on #banner-section
You also mentioned that you tried using a negative value for the margin-top. Here is a working example of that:
Fiddle here
HTML
(Also nested)
<div id="top-section"></div>
<div id="btm-section">
<div id="banner-section"></div>
</div>
CSS
#banner-section {
margin-top: -50px;
height: 100px;
background: rgba(255,255,255,0.5);
}
You can also have it poking out of the top section
If the #top-section is static and the bottom section can extend past the bottom of the page, this might be the best option for you.
Fiddle here
HTML
<div id="top-section">
<div id="banner-section"></div>
</div>
<div id="btm-section"></div>
CSS
#banner-section {
position: absolute;
bottom: -50px;
z-index: 2;
height: 100px;
background: rgba(255,255,255,0.5);
}
Without further details you can do it as follows:
JSFiddle Example
HTML
<div class="top-section"></div>
<div class="banner-section"></div>
<div class="btm-section"></div>
CSS
.top-section{
height:60px;
background-color:red;
}
.btm-section{
height:60px;
background-color:blue;
}
.banner-section{
position:absolute;
z-index:1;
margin-top:-20px;
height:40px;
width:100%;
background-color:rgba(255,255,255,0.5);
}
End Result
The trick here is to have the middle div banner-section positioned absolutly, and with a margin-top value negative corresponding to half its height, giving us this end result:
Explanation
Since the element with the CSS class .banner-section gets positioned absolutely, it will rise above in the document stack order. So the elements .top-section and .btm-section stay one after the other.
An element with position:absolute will then need some extra css to keep up with the desirable appearence, like a width declaration and a height declaration to set its size.
Check if this one helps you
http://codepen.io/anon/pen/EJBCi.
<div class="outer">
<div class="topSec"></div>
<div class="midSec">Midcontent</div>
<div class="btmSec"></div>
</div>
CSS
.outer {
position: relative;
height: 400px;
text-align: center;
}
.topSec {
height: 50%;
background: red ;
}
.btmSec {
height: 50%;
background: yellow ;
}
.midSec {
position: absolute;
background: rgba(255,255,255,0.7);
z-index: 1;
top: 50%;
height: 60px;
margin-top: -30px;
left: 0;
right: 0;
line-height: 60px
}
I have my HTML structure like this:
<div id="pagewrap">
<div id="header">
</div>
<div id="content">
<div id="left"></div>
<div id="right"></div>
</div>
<div id="footer"></div>
</div>
I want to increase size of content div when either divs in content div increases as same size as other div.
How can I achieve this?
This is how my css is:
#pagewrap
{
width: 100%;
height: 100%;
}
#header{width: 100%;height:97px;position:relative;}
#left{position:absolute;left:0px;width:20%;background-color:#1C2326;}
#right{position:absolute;right:0px;width:80%;background-color:#2D3538;color:#fff;}
#footer{clear:both;height: 80px;background-color:#72D27C;}
If you want the wrapper to be affected by the contents' dimensions, you can't use position: absolute in the inner divs. Try floating them instead (and add overflow: hidden to the container to clear the inner floats):
#pagewrap { width: 100%; height: 100%; }
#content { overflow: hidden; }
#header { width: 100%; height: 97px; position:relative; }
#left { float: left; width: 20%; background-color: #1C2326; }
#right { float: left; width: 80%; background-color: #2D3538; color: #fff; }
#footer { height: 80px; background-color: #72D27C; }
http://jsfiddle.net/h4hbx/
I think maybe this fiddle is closer to what you had in mind. You can let the left div (static position, no float) set the height of content, and then pin the top and bottom of the right div to the content div. As left grows, content grows, and right is tied to content, giving you the effect you want. However, this is asymmetrical -- if you want either div to cause the other to follow it, that's another problem.
CSS:
html, body {
height: 100%;
}
#pagewrap {
width: 100%;
height: 100%;
}
#content {
position: relative;
}
#header {
width: 100%;
height:97px;
}
#left {
left:0px;
width:20%;
background-color:#1C2326;
color: #fff;
top: 0;
}
#right {
position:absolute;
right:0px;
width:80%;
background-color:#2D3538;
color:#fff;
bottom: 0;
top: 0;
}
#footer {
clear:both;
height: 80px;
background-color:#72D27C;
}
Hi all. I need help in arrange the div of my website.
My website has 3 main DIVs.
1. DIV1 - My Header (fixed height)
2. DIV2 - Dynamic Content area so height varies
3. DIV3 - My Footer (fixed height)
All DIVs have 100% width.
The DIV1 header must have 0px with respect to the top of the browser. I wanted the 3 DIVs must be on top of each other as shown in the image. If the user has a resolution taller than my 3 DIVs, what will be at the most bottom after the DIVs are just empty spaces. However, I cant seem to get that layout working. the DIV3 footer keep giving me trouble.
I've following CSS code:
div1 {
position: fixed;
top: 0px;
}
div2 {
position: relative;
top: 0px;
}
div3 {
position: fixed;
top: 0px;
}
If I use position: fixed for DIV3, and my DIV2 has a shorter content, the whole website will look weird.
If I try changed to position: relative for DIV3, DIV3 will overlap and appear in front of DIV1.
Is there any better suggestion for that?
Thank you very much.
Is there any reason why you're using positioning to layout the div's?
Div's will naturally stack on top of each other without any need for positioning.
I think that you want fixed header and footer positioning.
http://www.cssplay.co.uk/layouts/basics2.html
HTML
<div class="div1">header</div>
<div class="div2">Content area</div>
<div class="div3">Footer</div>
CSS
.div1 {
height:100px; background:red; width:100%
}
.div2 {
position: relative;
top: 0px; background:green; width:100%; height:100px;
}
.div3 {
background:blue; width:100%; height:100px;
}
Demo http://jsfiddle.net/K3Unz/2/
I hope this may be helpful to you
use footer as bottom: 0px; if you want to fixed this in bottom
Here the demo: fiddle
body{
background:green;
}
div.one {
position: fixed;
top: 0px;
width: 100%;
height: 50px;
background: #4f4f4f;
}
div.two {
height: 100%;
width: 100%;
margin-top: 50px;
}
div.three {
position: fixed;
bottom: 0px;
width: 100%;
height: 50px;
background: red;
}
Check this: CSS layout generator.
EDIT:
Check this fiddle
Try using:
.head{
position:fixed;
top:0px;
}
.footer{
position:fixed;
bottom:0px;
}
In style, I put same height for div1,div2,div3 = 100px :
<style>
body
{
margin: 0 auto;
}
#div1 {
height: 100px;
width:100%;
top: 0px;
background-color:#F00;
}
#div2 {
height: 100px;
width:100%;
top: 0px;
background-color:#00F;
}
#div3 {
height: 100px;
width:100%;
top: 0px;
background-color:#FF0;
}
</style>
and in html tags:
<body>
<div id="div1">Header</div>
<div id="div2">Cotent</div>
<div id="div3">Footer</div>
</body>
I hope this will fit your requirements,
I have a div called header that is set up with a fixed position. The problem is when I scroll the page the content of the page shows up behind the header (the header is transparent).
I know a lot about css, but cannot seem to figure this one out. I have tried setting overflow to hidden, but I knew it wouldn't work (and it didn't).
This is very hard to explain, so I did the best I could.
html:
<div id="header">
<div id="topmenu">Home | Find Feeds | Subscriptions</div>
</div>
<div id="container">
<div id="content">
testing
</div>
</div>
css:
#header {
margin:0 auto;
position: fixed;
width:100%;
z-index:1000;
}
#topmenu {
background-color:#0000FF;
height:24px;
filter: alpha(opacity=50);
opacity: 0.5;
}
#leftlinks {
padding: 4px;
padding-left: 10px;
float: left;
}
#rightlinks {
padding: 4px;
padding-right: 10px;
float: right;
}
#containerfixedtop {
width: 100%;
height: 20px;
}
#contentfixedtop {
margin: 0 auto;
background-color: #DAA520;
width: 960px;
height:20px;
}
#container {
position: relative;
top: 68px;
width: 100%;
height: 2000px;
overflow: auto;
}
#content {
margin: 0 auto;
background-color: #DAA520;
width: 960px;
height: 2000px;
}
Here's a screenshot of the problem:
Just coming to this late, but in case anyone else runs across this in the future, here's your fix.
Your CSS Code:
.wrapper {
width:100%;
position:fixed;
z-index:10;
background:inherit;
}
.bottom-wrapper {
width:100%;
padding-top:92px;
z-index:5;
overflow:auto;
}
Your HTML:
<div class="wrapper">
...your header here...
</div>
<div class="bottom-wrapper">
...your main content here...
</div>
This will provide you with a header that cleanly matches your site, and floats at the top. The main content will scroll free of the header, and disappear when it passes the header.
Your .bottom-wrapper padding-top should be the height of your header wrapper's content.
Cheers!
You are probably looking for z-index. It allows you to specify the vertical order of elements on the page, so an element with z-index: 10 is floating above (visually) an element with z-index: 5.
Give the content z-index: 5 and see if it works.
I was having a similar issue, and found a solution for my case. It should apply whether you are using a full screen background image, or a solid color (including white).
HTML
<div id="full-size-background"></div>
<div id="header">
<p>Some text that should be fixed to the top</p>
</div>
<div id="body-text">
<p>Some text that should be scrollable</p>
</div>
CSS
#full-size-background {
z-index:-1;
background-image:url(image.jpg);
background-position:fixed;
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
}
#header {
position:fixed;
background-image:url(image.jpg);
height:150px;
width:100%;
}
#body-text {
margin-top:150px;
}
This gives me the look of a full page image with a transparent fixed header and when the body content scrolls, it hides behind the header. The images appear seamless.
You could do the same thing with a solid color background, though, arguably, it would have been easier.
2 notes: the header has a set height, I have only tested in FF and Chrome.
Just came up with a new solution to this type of problem that I'm quite happy with.
Use clip-path on the content that needs to hide behind the transparent element. Then update the clip-path dynamically with js on window scroll.
HTML
<div id="sticky">Sticky content</div>
<div id="content">
<!-- any html inside here will hide behind #sticky -->
</div>
JS
window.addEventListener("scroll",function(){
const windowScrollTop = window.scrollTop;
const elementToHide = document.getElementById("content");
elementToHide.style.clipPath = `inset(${windowScrollTop}px 0 0 0)`;
});
Dynamic sticky content
In my case I had an element that I switched to position: sticky after scrolling past it. The #sticky content needs to be relative to the dom elements that came before it until we have scrolled far enough. Here's how I accounted for that:
HTML
<div id="otherStuff">Here's some other stuff</div>
<div id="sticky">Sticky content</div>
<div id="content">
<!-- any html inside here will hide behind #sticky -->
</div>
JS
window.addEventListener("scroll",function(){
const windowScrollTop = window.scrollTop;
const stickyElement = document.getElementById("sticky");
const elementToHide = document.getElementById("content");
const stickyElementTop = stickyElement.getBoundingClientRect().top
if(windowScrollTop >= stickyElementTop){
stickyElement.style.position = "sticky";
elementToHide.style.clipPath = `inset(${windowScrollTop - stickyElementTop}px 0 0 0)`;
}
else {
stickyElement.style.position = "relative";
elementToHide.style.clipPath = "none";
}
});
I fixed this problem using the background property with a color, you can use var even if you'd like to
.header{
width:100%;
position:fixed;
z-index:10;
background:blue;
/* background: var(--my-var-value); You can do this if needed*/
}
Does #header have a set height?
#header {position: fixed; height: 100px; }
#container {position: absolute; top: 100px; bottom: 0; overflow: auto; }
Pretty sure this wouldn't work in IE though...
Fix the position of the content div below the header + overflow-y the content div.
I have fixed background image
The header background is transparent
I don't want my content to override my transparent header
I came up with a solution scrolling the div instead the body:
<div>
<div class="header"></div>
<div class="content"></div>
</div>
.header { position: fixed; ... }
.content { position: fixed; height: calc(100% - HEADER_HEIGHT); overflow: scroll; }
I too faced similar issue, but solved it using a simple dirty hack
1) have a white image in images folder
2) then add this css in header style
z-index:999; // to make header above the scrolling contents
background-image : url("../images/white.png"); // to hide the scrolling content
3) It is done!!
The header's z-index is set to 1000, so the z-index of the container would have to be 1001 if you want it to stack on top of the header. https://codepen.io/richiegarcia/pen/OJypzrL
#header {
margin:0 auto;
position: fixed;
width:100%;
z-index:1000;
}
#topmenu {
background-color:#0000FF;
height:24px;
filter: alpha(opacity=50);
opacity: 0.5;
}
#leftlinks {
padding: 4px;
padding-left: 10px;
float: left;
}
#rightlinks {
padding: 4px;
padding-right: 10px;
float: right;
}
#containerfixedtop {
width: 100%;
height: 20px;
}
#contentfixedtop {
margin: 0 auto;
background-color: #DAA520;
width: 960px;
height:20px;
}
#container {
position: relative;
top: 68px;
width: 100%;
height: 2000px;
overflow: auto;
z-index:1001;
}
#content {
margin: 0 auto;
background-color: #DAA520;
width: 960px;
height: 2000px;
}
I was having the same problem. I just used added z-index:10 to the .header in CSS.
I solved this problem by adding another fixed div positioned right under my header with margin-top of the size of my header.
HTML:
<div id="header">
<div id="topmenu">Home | Find Feeds | Subscriptions</div>
</div>
<div id="fixed-container">
Content...
</div>
CSS:
#fixed-container{
margin-top: header_height;
height: calc(100% - header_height);
width: 100%;
position: fixed;
overflow: auto;
}
I was facing the same problem, so the answer that tize gave helped me alot, I created a div right under my header and used some css(z-index, overflow and background), so the main element is scrollable and hid behind the transparent header:
HTML:
<header>
<h1>Hello World</h1>
</header>
<div class="inv-header"></div>
<main>Content Here...</main>
CSS:
header{
position:fixed;
background:rgba(255,255,255,80%);
top:0;
width:100%;
z-index:10;
}
.inv-header{
position:fixed;
top:0;
height:12.8%;
width:100%;
background:inherit;
}
main{
margin-top:5.9%;
padding-top:1%;
overflow:auto;
}