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);
Related
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;
}
I want to divide the homepage into three responsive main sections horizontally: a header, a body and a footer, and then divide the body part into three responsive and equal vertical sections.
Please suggest a way to do so
Divide sections horizontally
There are many ways to do that, and by default most HTML tags are stacked horizontally of top each other, but to fix a header on top of everything and and a footer below everything, without leaving the page even when scrolling you need to use the position: fixed rule with the top, left, bottom and right values adjusted to your design's needs. In the example below we stick the div with class header to the top of the screen, by setting the top: 0, and make it span the full width by specifying the left: 0; and right: 0; properties, the same goes for the .footer but it is sticking to the bottom instead using bottom: 0;. Then we have the div with class body to contain the rest of your page, we need to give it a margin-top equal to the .header's height in order to prevent hiding content below the .header, the same goes for margin-bottom and the .footer's height.
Divide the body vertically (responsively)
This is achieved easily by giving the width of elements using percentages, so if you need to divide the .body div into three columns, each should span the third (33.33%), and that is achieved by setting the width: 33.333%. Now to show inner divs on the same line you need to set the display property to inline (or other inline values) and make sure the margin is zero because it is not counted in the width property.
Of course there are many alternatives to do that, but this is an example on how to do it:
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 70px;
background: #4286f4;
text-align: center;
}
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 70px;
background: black;
color: white;
text-align: center;
}
.body {
background: green;
margin: 70px 0;
padding: 0;
width: 100%;
text-align: center;
}
.body_v1, .body_v2, .body_v3 {
height: 100px;
width: 33.333%;
border: 0;
display: inline-block;
margin: 0;
float: left;
padding: 0;
text-align: center;
}
.body_v1 {
background: #42f465;
}
.body_v2 {
background: #108928;
}
.body_v3 {
background: #034210;
}
<div class="header">header</div>
<div class="body">
<div class="body_v1">a</div>
<div class="body_v2">b</div>
<div class="body_v3">c</div>
</div>
<div class="footer">footer</div>
After all, my advice is that you use a third party framework to achieve this instead of reinventing the wheel, there are many examples out there you can have a look and choose the one that more suits you.
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
I'm trying to create a sticky footer from an image of 360px height, but I like that 160px of image to be behind the content and 200px to remain sticky.
My css is:
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 360px;
background: #049ec4
}
#wrap {
width: 90%;
border-radius: 8px;
background: #809FFF
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 360px;
width: 100%;
background: #049ec4 url("http://phonegap.com/css/images/cloud.jpg") 0 50% repeat-x;
}
http://jsfiddle.net/RC3Za
but is creating a unwanted space, I like css to output like this:
You can change the footer position to relative and instead of using the bottom property, set the top property to -250px or whatever you want. Set the z-index property to -1 to get it behind the wrap.
Take a look here: http://jsbin.com/picazedu/1/edit
EDIT:
A better solution, to avoid the footer being displayed in the middle of the window, is applying the background image to the body and adjusting it with the background-position:bottom left property. Now you can give the footer the height you want to fit the background image where you want: http://jsfiddle.net/YQMyc/4/
I am trying to get a div that is the document's width and height.
Minus 10 pixels all around as in this picture:
http://screensnapr.com/v/a9JWIf.png
But every time I pad or add to the margin of the body or outer div, it adds to the document's total height and shows scrollbars.
How can I make a div auto fill all available size without extending the size of the document?
edit: any negative margins do not effect the divs total size
Here is a fiddle
http://jsfiddle.net/ZRz32/6/
As you can see, it extends the document height.
I need it to stay the document's size minus ten pixels all around
I think that it's the easiest way to do it:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 100%;
}
#main {
position: absolute;
height: auto;
bottom: 0;
top: 0;
left: 0;
right: 0;
margin: 10px;
background-color: green;
}
<div id="container">
<div id="main"></div>
</div>
I updated your Fiddle here.
Here is a jsfiddle example.
Essentially, you need to set your containing element to width:100% and give it 10px of padding on left and right (padding:0 10px). Then, you can set your inner elements to width:100% and they will only go to within 10px of the max document width.
You could try either giving the div a width and height of 95-99%, but that won't always guarantee a space of 10px. You could do the 10px of padding on either the body or the div and just assign overflow:hidden to the body if you're planning on having all your content in one place.
If you want it fixed over the page, you could use positioning: <div style="position:fixed; top: 10px; left: 10px; right: 10px; bottom: 10px; background-color: rgba(155, 155, 155, .6);">Some text</div>