I want to span my footer the entire width of the page.
It doesn't sound like much but I'm spending a lot of time trying to fix it.
I have put margin 0 padding 0 to body and html.
My footer has a 100% width.
My footer is out of the container div and sits at the bottom of the page. It does not reach both sides of the page, left with a space between each side.
How do I fix this?
I have the following code in my css:
body {
font-family: Arial, Helvetica;
font-size: 14px;
margin: 0;
padding: 0;
}
html {
margin: 0;
padding: 0;
}
footer {
clear: both;
padding: 0;
background-color: #ff0;
width: 100%;
}
in Chrome, use the dev tools (press F12) to inspect the element and see what's causing the space.
in Firefox, you can use Firebug.
my guess is that it's a border on the footer, but without seeing the code, it's /just/ a guess.
Related
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/
Why does this white border always appear around the box? How can I get it to fit the whole page (horizontally) without using 'position:absolute' ?
http://jsfiddle.net/yag79aLt/
.footer-block {
height: 250px;
width: 100%;
background: #000;
}
<div class="footer-block">
Add the following to your CSS:
body {
margin: 0;
}
This will set the page's margin to zero, thus removing the white border around your JSFiddle.
Often there is a small margin around the body by default. In most major browsers, the default margin is 8px on all sides. It is defined in pixels by the user-agent-stylesheet your browser provides. Some browsers add padding too.
I start by adding this in all of my projects to override that:
body {
margin: 0;
padding:0;
}
If you have a large project you could consider using normalize.css. It resets a lot of default values to be consistent across browsers.
http://necolas.github.io/normalize.css/
You should always make margin and padding 0 of body before design.It will make your design perfect..good luck...:)
CSS CODE:
body {
margin: 0;
padding: 0;
}
.footer-block {
height: 250px;
width: 100%;
background: #000;
}
There is some background div for font:
#reset_font{
margin-top: -10px;
padding-right: -10px;
padding-left: -10px;
height: 800px;
width: 10%;
background-color: #00ff00;
}
And for top minus margin works, there is no space between font and window's top. But on the right there is thin line white line( without font) between window on right side and font.
If I set width to 101%, there is no space, but I don't like the idea.
It's quite messy to work with negative margins, as those margins might be browser specific.
What works when getting everything to the sides is something like this:
* {
margin: 0;
padding: 0;
border: 0;
}
Put that at the top of your css and you should be good.
The space that you see is for body and in some browser, for html. Just set the margin and padding to 0 for this two elements:
html, body {
margin: 0;
padding: 0;
}
Here is FIDDLE Demo without removing the gap.
Here is FIDDLE Demo by removing the gap.
I am working on a website for client / design studio, there was strange issue where I found that despite having body and html elements set to width 100% and when I resize browser, the scrollbar appears forcing me to scroll the right only to find there is a gap on the right side in about 150pixels. The body element container () sets itself to fixed width of 1240px when the browser is resized but still leave the gap on the right side.
Here is css code for body element.
body {
min-width: 1200px;
max-width: 100%;
left: 0px;
right: 0px;
width: auto !important;
margin: 0 auto;
padding: 0;
background: url('images/bg-repeat2.jpg') repeat;
line-height: 1;
font: 'BitstreamVeraSerifRoman', Arial, sans-serif;
}
here is the css for html element:
html {
margin: 0 auto;
padding: 0;
width: 100%;
min-width: 1200px;
left: 0px;
right: 0px;
}
I am not using "overflow-x: hidden;" property due to concerns in the need for scrolling in smaller screens and mobile devices as well. Please note that this site is desktop version.
I would appreciate if anyone in this community can assist by providing solution or fix.
Thanks.
Youre problem seems to be min-width:1200px; remove that, and it will resolve the mandatory horizontal scroll. If you want 100% width do it like this:
html, body {
width:100%;
}
I dont think you need more then that width wise, for html and body. if you do, explain why or post a pic what you need pls.
I have a very short (in height) page here: http://www.problemio.com/auth/forgot_password.php and it looks extremely awkward since the background color only goes down until the page ends.
I thought about making a set height to extend below the screen, but don't really want to do that because it will make my css more messy.
Is there a simple way to make that kind of a page extend all the way down?
here is my css that sets the general layout:
body, html
{
#padding: 5px;
}
body
{
font-family: "Century Gothic",Helvetica,Arial,sans-serif;
margin: 0;
padding: 0;
font-size: 1em;
background-color: #5C5957;
#background:url(/img/ui/background_image.png) top left no-repeat;
#background-size: 100%;
}
/* makes the background of the top bar gray */
.container
{
position: relative;
background-color: white;
overflow:hidden;
width:1000px;
margin: 0 auto;
}
Thanks!
Place the background-color rule to the html element also as:
html { background-color: #5C5957; }
Give the page a minimum height of 100%?
You Can also give min-height to layout div say 500px.