I'm having a little problem with my footer showing on top of my main content window.
Trying to move the margins so the main content over laps the header by 100px an over laps the footer by 100px and renders to bottom of window.
Not really sure whats wrong could it be to do with "::before" if so is there another way to do this?
Thanks
#wrapper:before {
content: '';
float: left;
height: 100%;
}
#wrapper {
height: 100%;
background-color: black;
}
#header {
z-index: 1;
height: 250px;
text-align: center;
background: url(../images/bg02.jpg);
border-bottom: 10px solid #01A9DC;
}
#main {
z-index: 2;
margin: -100px auto -50px auto;
width: 80%;
background-color: white;
min-height: 400px;
}
#footer {
z-index: 1;
border-top: 10px solid #01A9DC;
background: url(../images/bg02.jpg);
}
#footer:after {
z-index: 1;
content: '';
display: block;
clear: both;
}
<div id="wrapper">
<div id="header"> HEADER<br> </div>
<div id="main"> MAIN CONTENT </div>
<div id="footer"></div>
</div>
z-index has a lot of little tricks. I think roughly it only applies in certain situations, like positioned (relative or absolute) elements or elements with opacity changes. I made your example work here by adding position: relative to your #main element.
#wrapper:before {
content: '';
float: left;
height: 100%;
}
#wrapper {
height: 100%;
background-color: black;
}
#header {
z-index: 1;
height: 250px;
text-align: center;
background: url(../images/bg02.jpg);
border-bottom: 10px solid #01A9DC;
}
#main {
z-index: 2;
position: relative;
margin: -100px auto -50px auto;
width: 80%;
background-color: white;
min-height: 400px;
}
#footer {
z-index: 1;
border-top: 10px solid #01A9DC;
background: url(../images/bg02.jpg);
}
#footer:after {
z-index: 1;
content: '';
display: block;
clear: both;
}
<div id="wrapper">
<div id="header"> HEADER<br> </div>
<div id="main"> MAIN CONTENT </div>
<div id="footer"></div>
</div>
Z-Index is odd. The CSS property position plays a large role in how z-index works.
If you add position: relative; to #main you will see the desired effect.
I would say play around with different positions and z-indexes (as well as nesting these elements) and you will quickly figure out how weird it gets.
Related
im trying to build a ui with html.
The navbar should stay at the top
Some video below the navbar and the other content should scroll on the video( for now it is brown box) .
The sky blue box(which is for side navigation) should stop right below the nav box and pink box(content box) should continue scrolling.
issues :
the sticky nav box scrolls up after some scrolling and
the sky blue box doesn't stop below nav box.
please see the codepen and help me out....
html
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
.container {
display: flex;
position: relative;
top: 400px;
border-top: 4px solid black;
}
.box1 {
/* height:500px; */
position: sticky;
top: 50px;
width: 40%;
background-color: aqua;
border: 2px solid grey;
}
.box2 {
height: 1000px;
width: 60%;
background-color: pink;
}
.nav {
position: sticky;
top: 0;
background-color: blue;
z-index: 1000;
height: 50px;
}
.image-con {
position: fixed;
background-color: brown;
border: 2px solid yellow;
height: 500px;
width: 100%;
z-index: -1000;
}
<div class="nav"></div>
<div class="image-con"></div>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
https://codepen.io/mbs-yaswanth/pen/yZOLXQ
Remove
body,html{
height: 100%;
}
Once your sticky nav is hitting the bottom of your html and body it is not sticky anymore. It seems to move back up the page but its really just not following you through the overflow. Hope this helps.
EDIT
I think this is what you are looking for I changed a good bit of your code so just review it carefully. for some reason when you run the snippet box 2 gets smaller but it works in full page preview. Hope this helps
body,
html {
width: 100%;
margin: 0;
}
.box1 {
height:500px;
position: sticky;
top: 50px;
width: 39%;
vertical-align: top;
display: inline-block;
background-color: aqua;
border: 2px solid grey;
}
.box2 {
display: inline-block;
height: 1000px;
width: 60%;
background-color: pink;
}
.nav {
position: sticky;
top: 0;
background-color: blue;
z-index: 1;
height: 50px;
}
.image-con {
background-color: brown;
border: 2px solid yellow;
height: 500px;
width: 100%;
}
<div class="nav"></div>
<div class="image-con"></div>
<div class="box1"></div>
<div class="box2"></div>
I'm not a css-smarty, I already tried some codes from the internet and stackoverf but still not helping.
How can I fix a div on the left side of page, image can be found down below.
Image: http://prntscr.com/fbhhdi (I selected position with red lines)
If the red outline in your screenshot is, for an example, a div with class="fix-this", then your css would be like this:
.fix-this {
position: fixed;
left: 0;
}
Position fixed will position your div relatively to the viewport.
Left: 0 will place it to the left.
Now, if you also want it to go full height, you can add:
.fix-this {
position: fixed;
left: 0;
top: 0;
bottom: 0;
}
I think it will solve your problem.
body {
background-color: #000;
height: 100%;
padding: 0;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
#wrapper {
height: 100%;
}
.leftCol {
border: 2px solid red;
color: #fff;
float: left;
min-height: 400px;
height: 100%;
width: 250px;
}
.rightCol {
color: #fff;
float: left;
min-height: 400px;
height: 100%;
width: calc(100% - 254px)
}
<hr></hr>
<div id="wrapper" class="clearfix">
<div class="leftCol">
Content Here
</div>
<div class="rightCol">
Content Here
</div>
</div>
My site code is very usual
<div class="header"></div>
<div class="site-inner"></div>
<div class="footer"></div>
How can I make header background like on the image?
Is the whole site content have to be position absolute and margin-top:-500px ?
Is that only case to do it?
I assume you mean the overlap.
Negative margin is one way.
.header {
height: 50px;
background: lightblue;
}
.site-inner {
width: 80%;
margin: auto;
height: 50px;
background: lightgrey;
margin-top: -30px;
box-shadow: 0 -2px 2px black;
}
<div class="header"></div>
<div class="site-inner"></div>
You can use:
.header{
width: 80%;
height: 75px;
margin: 0 auto;
margin-top: -20px;
background:#3A3A3A;
}
Take a look at positioning: Positioning, also z-index might be relevant: Z-index, notice in my example the negative index on .header-bg
A quick example:
.header-bg {
width: 100%;
height: 200px;
z-index: -1;
background: lightblue;
position: absolute;
top: 0;
left: 0;
}
.header {
margin-top: 50px;
height: 50px;
background: grey;
z-index
}
.menu {
height: 80px;
}
.site-inner {
height: 400px;
width: 100%;
background: red;
}
<div class="header-bg"></div>
<div class="header"></div>
<div class="menu">menu</div>
<div class="site-inner">Site inner</div>
<div class="footer"></div>
A negative z-index lets you put elements behind others. The answer is simple enough then.
<div class="color"></div>
<div class="fixed">
<div class="header">
</div>
<div class="nav">
Text
</div>
<div class="body">
</div>
</div>
html, body
{
height: 100;
margin: 0;
}
div.color
{
position: absolute; /*Take out of the flow*/
top: 0; /*Move to top left*/
left: 0;
z-index: -1; /*Place below normal elements in the flow*/
width: 100%; /*Fill whole width*/
height: 300px; /*300px tall*/
background: #c7edfb; /*Color specified*/
}
div.fixed
{
margin: 50px auto 0; /*push whole document down 50px and center*/
width: 600px; /*document is 600px wide*/
}
div.header
{
height: 150px; /*top gray block is 150px tall*/
background: #222; /*dark gray*/
}
div.nav
{
padding: 25px 0; /*Gap between blocks above and below*/
}
div.body
{
min-height: 300px; /*Force a height*/
background: #777; /*Light gray*/
box-shadow: 0 0 8px black; /*Drop shadow*/
}
JSFiddle
I am building a 3 columns layout website. The header will fixed on the top and nav will fixed on the left. Then the wrapper will contain main and aside. What I want is main and aside can fill the wrapper's height.
And here is my css. You can also see my jsFiddle http://jsfiddle.net/scarletsky/h8r2z/3/
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
.header {
width: 100%;
height: 100px;
position: fixed;
top: 0;
z-index: 9;
background: red;
}
.nav {
width: 20%;
height: 100%;
position: fixed;
top: 100px;
left: 0;
background: green;
}
.wrapper {
width: 80%;
min-height: 100%;
margin-top: 100px;
margin-left: 20%;
position: relative;
}
.main {
width: 70%;
min-height: 100%;
position: absolute;
left: 0;
background: black;
}
.aside {
width: 30%;
min-height: 100%;
position: absolute;
right: 0;
background: blue;
}
.u-color-white {
color: white;
}
It seems that they can work well. But when the content's height in main or aside more than their own height, it will not work. I don't know how to fix it.
Can anyone help me?
Thx!
You have a very strict layout. everything is fixed..
what if you need to change the header from 100px height to 120? you'll have to change it accordingly in a lot of different places.
This is a pure CSS solution for your layout, without fixing any height or width. (you can fix the height or width if you want to)
This layout is totally responsive, and cross browser.
if you don't fix the height/width of the elements, they will span exactly what they need.
Here's a Working Fiddle
HTML:
<header class="Header"></header>
<div class="HeightTaker">
<div class="Wrapper">
<nav class="Nav"></nav>
<div class="ContentArea">
<div class="Table">
<div class="Main"></div>
<div class="Aside"></div>
</div>
</div>
</div>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
body:before {
content:'';
height: 100%;
float: left;
}
.Header {
height: 100px;
/*No need to fix it*/
background-color: red;
}
.HeightTaker {
position: relative;
}
.HeightTaker:after {
content:'';
display: block;
clear: both;
}
.Wrapper {
position: absolute;
width: 100%;
height:100%;
}
.Nav {
height: 100%;
float: left;
background-color: green;
}
.ContentArea {
overflow: auto;
height: 100%;
}
.Table {
display: table;
width: 100%;
height: 100%;
}
.Main {
width: 70%;
/*No need to fix it*/
background-color: black;
display: table-cell;
}
.Aside {
width: 30%;
/*No need to fix it*/
background-color: black;
display: table-cell;
background-color: blue;
}
.u-color-white {
color: white;
}
This is a pretty common problem. I'd recommend either having a background image for wrapper that makes it appear like aside has a min-height of 100% or using the method on this site:
http://css-tricks.com/fluid-width-equal-height-columns/
just see this fiddle.... hope this is what you want...
.aside {
width: 30%;
min-height: 100%;
position:fixed;
right: 0;
background: blue;
}
http://jsfiddle.net/h8r2z/6/
First off, similar but never answered questions:
vertically-scrolling-percentage-based-heights-vertical-margins-codepen-exampl
scroll-bar-on-div-with-overflowauto-and-percentage-height
I have an issue with scrolling a center part of the web page while its height needs to be auto.
Here is a fiddle
The header needs to be on top at all times, meaning I don't want the body to become larger than 100%.
However the div #messages can become larger, and that div needs to scroll on its own.
The #messages has a margin-bottom to leave room for the fixed bottom div.
I tried making the div #messages with box-sizing: border-box; and making it height:100% and padding to keep it in place but this was a really nasty looking solution and the scroll bar was the full page height instead of only the inner part.
Any help would be greatly appreciated.
You want something like This
Or maybe - his big brother..
Pure CSS solution, without fixing any height.
HTML:
<div class="Container">
<div class="First">
</div>
<div class="Second">
<div class="Content">
</div>
</div>
</div>
CSS:
*
{
margin: 0;
padding: 0;
}
html, body, .Container
{
height: 100%;
}
.Container:before
{
content: '';
height: 100%;
float: left;
}
.First
{
/*for demonstration only*/
background-color: #bf5b5b;
}
.Second
{
position: relative;
z-index: 1;
/*for demonstration only*/
background-color: #6ea364;
}
.Second:after
{
content: '';
clear: both;
display: block;
}
.Content
{
position: absolute;
width: 100%;
height: 100%;
overflow: auto;
}
You could try the following.
You HTML is:
<div id="container">
<div id="header">The header...</div>
<div id="content">
<div id="messages">
<div class="message">example</div>
...
<div class="message">example</div>
</div>
<div id="input">
<div class="spacer">
<input type="text" />
</div>
</div>
</div>
</div>
Apply the following CSS:
html, body {
height: 100%;
}
body {
margin:0;
}
#header {
background:#333;
height: 50px;
position: fixed;
top: 0;
width: 100%;
}
#content {
position: absolute;
top: 50px;
left: 0;
right: 0;
bottom: 45px;
overflow-y: scroll;
}
#messages {
overflow: auto;
}
#messages .message {
height: 79px;
background: #999;
border-bottom: 1px solid #000;
}
#input {
position:fixed;
bottom:0;
left:0;
width:100%;
height: 45px;
}
#input .spacer {
padding: 5px;
}
#input input {
width: 100%;
height: 33px;
font-size: 20px;
line-height: 33px;
border: 1px solid #333;
text-indent: 5px;
color: #222;
margin: 0;
padding: 0;
}
See demo at: http://jsfiddle.net/audetwebdesign/5Y8gq/
First, set the height of 100% to the html and body tags, which allows you to reference the view port height.
You want the #header to be fixed towards the top of the page using position: fixed, similarly for your footer #input.
The key is to use absolute positioning on #content to stretch it between the bottom edge of the header and the top edge of the footer, and then apply overflow-y: scroll to allow it to scroll the content (list of messages).
Comment
The source code for the #input block may be placed outside of the #content block.