I'm a coding a simple navbar component with 100% width and a margin, but no matter what I try it always seems to be way off the page on the right side of the screen. Any idea where the problem could come from?
I've tried to simplify things by creating a simple box within a div and giving it 16px margins, but I have the same problem. I was thinking maybe my CSS inherits from conflicting property of the body but after checking the inspector that doesn't seem to be the case.
Thanks for any insights!
//_navbar.scss
.box {
position: absolute;
width: 100%;
background: black;
margin: 16px;
}
// _navbar.html.erb
<div class="box">
Hello?
</div>
Because width: 100% PLUS margin: 16px is more than 100%.
Maybe you want to apply the margin to the body or whatever container is the parent of .box?
By adding this body property to CSS you disable the automatic 8px margin that the body tag has.
Try this new CSS stylesheet.
.box {
position: absolute;
background: black;
margin: 16px;
position: fixed;
right: 0px;
left: 0px;
}
body {
margin: auto;
}
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 have a header section along the top of my site which I want to stay fixed when people scroll down the page. The background of the header is black against a plain white background.
After adding in the position:fixed; rule it seems to add a margin of about 16px between the top of the page.
#container-id-01 {
height: 100px;
width: 100%;
background-color: #000;
margin-top: 0;
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
position: fixed;
}
I've tried changing the margin to float:left; but it still doesn't make any difference. The width: 100%; needs to be a percentage to fill the full width of the page.
Is there anyway to get rid of the margin?
Adding !important didn't work, and the body was already set to padding:0;
I took advice from a commenter and top:0; did the trick
:)
May be some style is overriding your current css make sure no other css is there for that element or you can do.
#container-id-01 {
height: 100px;
width: 100%;
background-color: #000;
margin-top: 0px!important;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px!important;
position: fixed;
}
this will override all other styles..
Try this, it might be the default body padding.
body{padding: 0px;}
I am trying to make a footer that spans the width of a page minus 10px on the left and right. I am trying to do this by giving the body a padding on all sides of 10px. In the code below the header works just fine, but the footer is ignoring the body padding on the right side. Why is it doing that and how can I fix it?
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding:0;
margin:0;
}
body {
margin: 0;
padding: 0 10px;
}
#header {
height: 150px;
width: 100%;
margin: 0 auto;
background: #333;
}
#footer {
position: fixed;
bottom: 5px;
width: 100%;
background: #f63;
text-align: center;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="footer">I am the footer!</div>
</body>
</html>
your footer not ignoring body padding, look through console at that element sizes and you will see that width of your footer is 100% of window width + 10px from left padding + 10px from right padding.
you can use calc function in css: https://developer.mozilla.org/en-US/docs/Web/CSS/calc
#footer {
width: calc(100% - 20px);
}
JSFiddle
Footer width and padding are calculated separately. You can use use box-sizing: border-box to prevent this from happening
Use this for all elements to behave this way
* {
box-sizing: border-box;
}
There is a good video by Travis Neilson on his YouTube channel DevTips, where he explains the box-modal concept.
#footer {
position: fixed;
bottom: 5px;
left: 10px;
right: 10px;
background: #f63;
text-align: center;
}
demo: http://jsbin.com/benosofo/3/
A fixed element is not fixed in relation to the body, it's fixed in relation to the window. If it would be fixed in relation to the body then it would be just as absolute positioning, and it would scroll with the body.
You can make a fixed container for the footer, so that you can use a padding on that.
HTML:
<div id="footercontainer"><div id="footer">I am the footer!</div></div>
CSS:
#footercontainer {
position: fixed;
bottom: 5px;
width: 100%;
padding: 0 10px;
}
#footer {
background: #f63;
text-align: center;
}
None of the solutions in the net worked for me. so I solved it another way. I was trying to create a modal for adding address and was testing it on the mobile mode. I wanted a fixed layer with rgba(0,0,0,0.75) to cover all the window and in the center, a white form appear for the user. the form header was hiding in the top (and unscrollable) and in the bottom, was sticking to the bottom of window which was not looking good (in some cases, some element won't work when they don't have enough space from the window borders).
so I solved the problem by putting a div after the form div in the bottom (to stick to the window bottom instead of my form) and made it transparent. so it worked! (I have to mention that I am writing react code)
this is my div:
<div className="modal-padding"/>
and this is my styling for this div:
.modal-padding {
width: 100%;
border: 10vh solid transparent;
}
I used one, before the form div and one after that.
Be careful. I tested giving a width: 100vw and height: 10vh to the div but when it has no content, it doesn't work, seems it doesn't exist at all. so I gave a border.
I hope this solve your problem too, or give you an idea for solving the issue.
Good luck.
You could make a wrapper for your footer and apply the 10px padding to that instead.
#footer-wrap {
position:fixed;
bottom:0px;
left:0px;
padding:10px;
}
and then when you place your footer inside it will be correctly padded. This way is the most backwards compatible solution as it doesn't rely on css3 calc.
JSFIDDLE
http://jsfiddle.net/pk8uU/
So im making a very basic website with a photo gallery, I have this css for my footer.
#footer
{
color: #f0c;
font-size: 9px;
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: #c00;
text-align: center;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 18px
And the bar does not scroll down with the rest of the page, instead scrolls up with the page like this: http://i.imgur.com/yqM9WDM.png
Help much apreciated!
I'm not totally sure what you're trying to achieve from your description, and can't comment. Are you trying to keep the red bar at the bottom of the window?
In that case, the important CSS is:
#footer {
position: fixed;
bottom: 0;
}
That will stick it to the bottom of the viewport (scrolling viewable area). The rest of the styling is up to you.
By the way, it would be better to use a class (.footer) than an ID (#footer) for this.
Use position: fixed or position: sticky instead of position: absolute to fix something on page. Read this article for more understanding how position works.
If I understand you correctly then what you want is to use position:fixed not position:absolute
Fixed position will literally fix your element in place.
Here's a fiddle with it in action - http://jsfiddle.net/mSE6c/
does this work for you?
CSS:
* {
margin:0;
}
html, body {
height: 100%;
}
#inhalt {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -30px;
}
#footer, #clearfooter {
height: 30px;
}
HTML:
<div id="inahlt">Inhalt <div id="clearfooter"></div></div>
<div id="footer">Footer</div>
Source:
http://www.flashjunior.ch/school/footers/fixed_stop.cfm
Use position:fixed instead of position:absolute, this will keep it in a single position.
http://jsfiddle.net/PM9Xt/ shows this while it's in action. top:0 keeps the header at the top, while bottom:0 keeps the footer at the bottom.
Things i want achieve is quite simple
just at top a fixed position element that do not move while scrolling
down the document.
and after is a div#content have some margin-top from the top edge
and center in the window.
so the code is:
html
<div class='head-container' id="headerCom">
<header id="a"></header>
</div>
<div id="content" role="main"></div>
CSS
* {
margin: 0;
padding: 0
}
body {
width: 100%;
height: 100%;
position: relative;
}
.head-container {
position: fixed;
top:0;
left:0;
width: 100%;
height: 100px;
background: red;
_position:absolute; // make the ie6 support the fixed position
_top: expression(eval(document.documentElement.scrollTop)); // make the ie6 support the fixed position
}
header {
display: block;
width: 960px;
height: 100px;
margin: 0 auto;
position: relative;
zoom: 1;
background: blue;
}
#content {
border: 1px solid black;
margin: 130px auto 0 auto;
width: 960px;
height: 1000px;
background: #999;
margin-top: 150px;
}
all the modern browser is well support,but in ie(ie7,ie8,ie10) do not work correctly,things is just like it ignore the margin-top i set to the div#content;
so far i have checkout the other question on stackoverflow,and i try almost everthing i could.
when i change the margin-top of the div#content to the padding-top,things okay.
When i put a div.clear(clear:both)in between the div.header-container and the div#conetent,the things goes okay;
Or i follow other questions' solution that it caused by the hasLayout, and then take out the width and height of the div#content, the things is also okay, but in this way, i will need to put another div#inner-content inside the div#content, and set width and height to it to see the result.
so i am quite confused by the hasLayout, and i am not quite sure i am completely understand what it is and not quite sure what is happening in here in my code.
So actually can all you help me with this, is there any other solution could fix this problem, and explain this wired things to me?
Thank you anyway.
It works fine for me once I get rid of the last margin-top attribute. Do you know you have set it twice? Once with margin and them again with margin-top. If you edit just margins first value it wouldn't work because the last one will override the first one.