I am trying to make an infinite footer to the sides, and even though it's infinite, there is a small margin to the left and right of the footer. I don't have any margins set to my body, html, or anything, so I am unsure on what may be causing this.
Here is my footer css:
#footer {
height: 72px;
width: 100%;
background-color: #174466;
margin: 0 auto;
}
And here is the html:
<div id="footer">
</div>
Any ideas? Thanks!
I don't have any margins set to my
body, html
That either means you're not setting it at all, or that you're setting it to 0.
I'm going to guess that you're not setting it at all, and so you need to zero out the default margin/padding on body/html.
Try adding this CSS, preferably at the top of your style sheet (for good organization):
html, body {
margin: 0;
padding: 0
}
Related
I created a div where I plan to a title for my webpage, I set the width to 100% but there was still white on the sides and top. I got the top to disappear but the sides won't, I assume it's got something to do with the movement of the div, I've checked everywhere, but everyone has different divs for different purposes so I couldn't find the answer. In case you guys wanna show an example of your solution you could do so here
Here is the HTML:
<div id="toptitle">
</div>
For my CSS I tried using margin-left: -8px and the same for the right side but they don't work like that, it's only movement of the div and even when I don't set the left side yet the right still won't move till there's isn't a white gap:
#toptitle {
width: 100%;
height: 140px;
background: #42647F;
margin-top: -15px;
}
Reset your body margin. Also make a research for reset css.
body {
margin: 0;
}
Add margin: 0 to the body :
body{
margin:0;
}
You are missing body margin, please have a look at the below working snippet taken from your codepen. and there is no need to have negative top margin too.
body {
margin: 0
}
#toptitle {
width: 100%;
height: 140px;
background: #42647F;
}
<div id="toptitle">
</div>
The body tag has a default margin of 8px which you have to remove. So just add this to your code:
body{
margin:0;
}
You should also remove margin-top:-15;
Hope this is clear to you!
When I check the following code in the Chrome devtools (device toolbar, responsive) and the window gets smaller than 1040px width, the ".wrapper" suddenly get's an increasing right margin until 60px.
I really can't understand why it get's this margin. Can anyone explain this behavior or push me in the right direction?
My HTML-/CSS-Code:
body {
background-color: grey;
padding: 0;
margin: 0;
}
.wrapper {
width: 1040px;
margin: 0 auto;
background-color: red;
}
header[role="banner"] {
background-color: #fff;
padding: 20px 0;
}
<header role="banner">
<div class="wrapper">
<h1>Headline</h1>
</div>
</header>
The line "margin: 0 auto;"
actually means no vertical margin and spread the horizontal margin "automatically": That means there will be an equal margin on the left and right of your "wrapper" to fill in for what goes beyond the 1040 px.
I am positive this is to do with the browser default style that is applied. Try using a normalize or css reset file with your code and see if the style is still applied.
I'm currently using React and I'm having issues getting a div to equal 100% of the height of the page. Originally, I had an issue with there always being about 24px of empty space above the body. I couldn't fit it no matter what. I eventually used this on my app.css (a reset)
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
It fixed the issue, but still, a measurement of 100% or 100vh doesn't actually equal 100% of the total view. Here's a screenshot of the page:
https://gyazo.com/3407b6bd0032f402f3bb97acdb725e40
The blue div is a div that fills 100vh. Yet, it doesn't fully fill the page. I tried 100% as well.
Blue div:
.loginWrapper {
margin-left: 260px;
height: 100vh;
background-color: #29B6F6;
}
I noticed that the html had this styling on it, yet even when removed no changes were noticeable:
html {
box-sizing: border-box;
}
If someone could please explain this phenomenon, I would be very grateful. If you need any extra information, just let me know. Thanks!
You will have to reset the basics margin and padding if applied from html and other top level tags.
body, html {margin: 0;padding: 0;}
Or just use something like reset.css
http://meyerweb.com/eric/tools/css/reset/
In HTML, I am trying to make a footer but every time I do this it just comes like this with an added margin on the left.
this is my footer code;
<div id="footer"> tester </div>
#footer {
background-image: url(images/backgroundrpatternfooter.png);
background-repeat: repeat;
position : absolute;
bottom : 0;
height : 40px;
width : 1800px;
margin: 0;
}
Your problem lies not within the footer div, but within the body. The body element has a default margin of 8px (might depend on the browser you're using), so you need to set the body's margin to 0 like this:
body {
margin: 0;
}
Working example.
I would also like to suggest that you look into using the footer element instead of using a div as a footer, it was added to HTML5 for that very purpose!
I hope this helped and good luck!
<div id="footer"> tester </div>
#footer {
background-image: url(images/backgroundrpatternfooter.png);
background-repeat: repeat;
position : absolute;
bottom : 0;
height : 40px;
width : 1800px;
margin: 0;
**left:0;**
}
Try adding left:0;, if still not working check your inherit css.
Your CSS indicates a fixed with of 1800px but since your element is absolutely positioned, you need to add a margin-left or left property to specify where the element should be positioned from (margin-right and right also work).
Do you want your element centered? Try using
left: 50%
to achieve that.
Also, try adding
left: 0;
and see if that removes the gap you're dealing with.
(The gap is probably caused by your containing element being wider than 1800 px).
I have a main container in CSS that contains all divs for the page. However, there is a white space of 8px pushing the entire container to the left. Any idea how I can get rid of it, and have the container fit the entire window without white space? If I use "margin-left: -8px" it just creates 8 pixels of white space on the right. Heres the code for the container:
#container {
height: 100%;
width: auto;
position: relative;
background-color: #E6E6E6;
min-width: 960px;
}
Just set margin: 0px; on #container, if that does not work you can set
body {
margin: 0px;
padding: 0px;
}
This is because of the default styles being applied by the browser stylesheet.
There are a few ways you can solve you're problem:
Apply this css rule, which effectively get's rid of any default padding or margin applied to elements.
* {
margin: 0;
padding: 0;
}
Or you could use a css reset stylesheet, which I recommend the most because different browsers handle elements somewhat differently and you want to even the field out so you don't run into any problems later. I recommend Eric Mayers css reset stylesheet it can be found here: http://meyerweb.com/eric/tools/css/reset/ and I use it for my own projects.
html, body, #container {margin:0; min-height:100%;}