I want the size of my footer in the bottom of the page to be the same as my navigation bar in the top (with some white space in the corners).
The bar is inside a container which has container{margin:auto;}thats why there is white space in the corners .
I don't understand why the footer took the whole screen width, it is inside the same container as the bar on top.
here is the footer css:
.down{
position: absolute;
margin: auto;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: gray;
text-align: center;
}
I don't want to edit the margin left and right because it wont be responsive anymore
Tough to say without the HTML but try adding the following rule to the container:
.container {
position: relative;
}
The footer has a position absolute on it. By giving the container a relative position, the footer will be positioned relative to the container instead of the body.
This will cause the footer to not be attached to the bottom of the window, but the bottom of the content. So in addition, add a minimum height to the container:
.container {
min-height: 100vh;
}
you have to put your <div class="down"> inside the container
<div class="container">
<nav></nav>
<div class="down">
</div>
</div>
.down{
position: absolute;
margin: auto;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: gray;
text-align: center;
}
Related
Basically I tried to build a sidebar which has some spaces on top and bottom but I couldn't get at the bottom. Here is a pic sidebar has top spaces but not bottom
and here is my css code
.sidebar {
position: fixed;
top: 14px;
left: 20px;
//bottom: 14px;
width: 7.375rem;
height: 100%;
// margin-bottom: 14px;
border-radius: 1.8125rem;
background-color: blue;
z-index: 100;
}
How can I achieve like the sidebar has space too at the bottom as top. I tried to gave a margin to bottom and also setting the bottom but I didn't get it.
Could simply add an extra container as a wrap container and use padding.
using calc means you are strict to specify the amount of top/bottom you wish to have.
heres a quick example:
HTML:
<div class="wrap">
<div class="sidebar"></div>
</div>
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrap {
width: 7.375rem;
left: 20px;
position: fixed;
height: 100vh;
z-index: 100;
padding: 20px 0;
}
.sidebar {
border-radius: 1.8125rem;
background-color: blue;
height: 100%;
}
This way, the container with class wrap sets the limits of the inner container sidebar and padding, in the wrap container, limits so the inner container to be 20px from the top and bottom. box-sizing: border-box is IMPOSTANT tho, either apply it to everything, like in my example, or just the wrap class. Without it, the child element with height: 100% would take the entire parents height + 40px for top and bottom padding. What this does is similar to what calc would do just automatic.
Having the height set to 100% is causing problems here.
You could try using calc, to set the height to 100%, minus the top and bottom space that you want, for example:
height: calc(100% - 28px);
I am having a lot of trouble figuring this one out, essentially I have 3 columns: navbar (dark gray), main content (dark red) and sidebar (dark green) where navbar can be expanded and shrinked and sidebar can slide out and slide in (so change width from 0 to something and back to 0). And I want to keep all of this responsive. Idea is to shrink main content accordingly when some or both navbar and sidebar are expanded. unfortunately only way I can think to do this is to change width of main content to something like width: calc(100% - navbar width - sidebar width) but this is really verbose when I need to check if sidbar is expanded or navbar, or both are not expanded etc...
Here is an image illustrating how main content shrinks:
I assume flexbox could be used here somehow, but was not able to figure it out.
let example marku be
<nav> </nav>
<main> </main>
<aside> </aside>
note: nav and aside need to be 100% height of the page and are fixed in place.
You can use flex-box for this. A simple approach would be as follows: http://codepen.io/anon/pen/pgVVJb
You can change the classes to see how it changes the layout. NOTE: I am using classes to change the width of the columns but you could use JavaScript or static CSS similarly.
Code dump:
<div class="container">
<div class="small">Nav</div>
<div>Content</div>
<div class="medium">Sidebar</div>
</div>
html, body, div {
height: 100%;
margin: 0;
padding: 0;
}
.container {
display: flex;
}
.container div {
flex: 1;
border: 1px solid #ccc;
background: gray;
}
.small {
max-width: 50px;
}
.medium {
max-width: 150px;
}
One popular solution to this is putting all of these elements in a wrapper with position: relative or even putting setting body's to position: relative, and all the elements inside with position: absolute. Then you can set each element as follows:
.navbar {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
width: 50px;
}
.main-content {
position: absolute;
top: 0px;
left: 50px;
bottom: 0px;
right: 150px;
}
.sidebar {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
width: 150px;
}
Of course the container element need to have some height for this to work.
Fiddle: http://jsfiddle.net/dbwvx42s
Description of Issue: I'm using Bootstrap to make some columns within a section. The section has zero height (e.g. height: 0) but 56.25% bottom padding in order to maintain the aspect ratio (16:9) of the other content on the page.
The problem I'm running into is how to vertically center the content within this zero-height, padded element. I've attempted a flexbox solution to no avail. I've tried inline-blocking the content and using vertical-align, which was also a no-go. I'm running out of tricks!
Any help appreciated.
Code:
#section-1 {
background-color: #0099cc;
color: #fff;
height: 0;
padding-bottom: 56.25%;
}
You can create an absolutely positioned child element containing the content:
#section-1 {
position: relative;
background-color: #0099cc;
color: #fff;
height: 0;
padding-bottom: 56.25%;
}
#section-1 div.content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
<div id="section-1">
<div class="content">
Content goes here
</div>
</div>
Now, div.content can be used as a normal sized div.
I have a div with some text on my page, and I want it to be at the bottom. I did this using fixed positioning:
div#popup{
position: fixed;
bottom: 0;
But I also want it to be centered. I tried giving it a width of 40% and auto margins, but that doesn't work (it doesn't work with the combination of the above code) :
div#popup{
position: fixed;
bottom: 0;
width: 40%;
margin-left: auto;
margin- right: auto;
How can I achieve this?
Thanks.
If you know width of div you can use negative margin-left for horizontal position (which equals half of width).
div {
position: fixed;
bottom: 0;
left: 50%;
width: 40%;
height: 30px;
margin-left: -20%;
background: blue;
}
JSFiddle
If you don't know width, just use wrapper and inline-blocks:
HTML:
<section>
<div>la-la-la</div>
</section>
CSS:
section {
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
}
div {
display: inline-block;
border: 1px solid red;
color: red;
}
JSFiddle
I encourage You to check two nice tutorials (quick read):
http://www.barelyfitz.com/screencast/html-training/css/positioning
http://learnlayout.com/position.html
I think You need to describe position like this:
div#popup{
position: fixed;
bottom: 0;
right: 50%;
}
First off, you should never use fixed positioning to get your footer to stick to the bottom. To get the footer to stick to the bottom of the screen, set all your divs to relative, then add an extra div the same height as the footer (set a height for your footer) between the content and the footer. Then put a margin of negative that height on your content div. Works perfectly.
To centre it, use width auto and margin left and right auto or just use text-align center
My project has the following requirements:
Header fixed to the top of the page
Content area has a white background and 100% height
No scroll bar when content is less than height of the screen
Must support IE7+ (a JS fix for IE is ok)
When content is taller then height of screen, scrolling it should stay within the white content area (not go under the header).
Here is my basic HTML:
<div class="wrap">
<div id="header">header</div>
</div>
<div class="wrap" id="content">content</div>
CSS:
body{background:#C0DEED url('https://si0.twimg.com/images/themes/theme1/bg.png') repeat-x 0px -80px fixed;}
html,body{height:100%;}
.wrap{width:300px; margin:0 auto;}
#header{position:fixed; background:#aaa; top:10px; width:300px;}
#content{height:100%; background:white; margin-top:40px}
Example: http://jsfiddle.net/zw3WS/
First question is how to get the content to have 100% height, not go under the header, and still not have an unnecessary scrollbar?
Second, if the content is taller than the screen, how would I make it scroll only in the white space, and not allow the content to scroll under the to bar as it currently does?
For scrolling "only in the white space", you can do it by setting position: fixed on the wrapper element, then absolutely positioning the header and content elements inside:
body{
background:#C0DEED url('https://si0.twimg.com/images/themes/theme1/bg.png') repeat-x 0px -80px fixed;
overflow: hidden; /* no scrollbars for page body */
}
.wrap {
width: 300px;
position: fixed;
top: 10px;
left: 50%; /* for horizontal centering */
margin-left: -150px; /* for vertical centering */
bottom: 0;
}
#header{
position: absolute;
background:#aaa;
top: 0;
left: 0;
right: 0;
}
#content{
background:white;
position: absolute;
bottom: 0;
top: 30px;
left: 0;
right: 0;
overflow: auto; /* this makes the scrollbar appear inside #content */
}
Demo: http://jsbin.com/osipin/1/edit
For scrolling in the page body, you need to add two elements to your markup: a background for the header, and a background for the content.
The purpose of the header background is to cover up the content when it's scrolled down, where otherwise it would appear underneath the header. What you use to cover the content is simply the same background as the page. You must size this bg element correctly so that it fills the width of the viewport, and is the height of the top margin of your content area. The real header can be horizontally centered within this bg element using a set width and margin: 0 auto.
The content background element should be an empty element which precedes the content, and has a fixed position. Its purpose is to ensure that the white area extends to the bottom of the page even when the content is shorter than the viewport height.
Your new CSS looks like this:
body, .header-bg {
background:#C0DEED url(https://si0.twimg.com/images/themes/theme1/bg.png) repeat-x 0 -80px fixed;
}
.wrap {
width:300px;
margin: 0 auto;
}
.header-bg {
position: fixed;
top: 0px;
left: 0;
right: 0;
height: 40px;
}
#header {
background:#aaa;
width:300px;
margin: 10px auto 0;
}
.content-bg {
background: #FFF;
position: fixed;
width: 300px;
top: 40px;
bottom: 0;
z-index: -1;
}
And your new markup like this:
<div class="wrap">
<div class="header-bg">
<div id="header">header</div>
</div>
<div class="content-bg"></div>
<div id="content">
CONTENT
</div>
</div>
Demo: http://jsbin.com/osipin/4/edit