I am trying to make a footer, but the left and right sides show some white space. How to remove the white space?
Here is my code:
<html>
<head>
<style>
footer {
background: none repeat scroll 0% 0% #DFDFDE;
padding: 120px 0px;
text-align: center;
position: relative;
}
.divider {
background: url('http://evablackdesign.com/wp-content/themes/ebd/images/footer-border.png')
repeat-x scroll center center transparent;
height: 7px;
width: 100%;
position: absolute;
top: -6px;
}
.container {
width: 930px;
margin: 0px auto;
}
</style>
</head>
<body>
<footer>
<div class="divider"></div>
<div class="container">
<h1>hiiiiiiiii</h1>
<br>
<h2>buyyyyyyyyyyyy</h2>
</div>
</footer>
</body>
</html>
image of footer
The tag defines a footer for a document or section.
A element should contain information about its containing element.
A footer typically contains the author of the document, copyright information, links to terms of use, contact information, etc.
The body has a default margin. Remove it via:
html,body {
margin:0;
padding:0;
}
Most Web browsers have different default settings for the base margins and padding. This means that if you don't set a margin and padding on your body and html tags, you could get inconsistent results on the page depending upon which browser you're using to view the page.
The best way to solve this is to set all the margins and paddings on the html and body tags to 0:
html, body {
margin: 0px;
padding: 0px;
}
*{
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
overflow-x: hidden;
}
Try out this code:
html, body {
width: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
Your body has a default margin and padding and you need to override it.
At the beginning of your style type.
body{
padding: 0;
margin: 0;
box-sizing: border-box
}
Add this to your style tag...
body {
margin: 0;
}
Just make sure to add this class to your CSS style.
.container-fluid {
width: 100%;
margin: 0px;
padding: 0px;
}
Try this; it is the simplest one, add it to your body selector.
body {
margin: 0px;
padding: 0px;
width: 100%;
}
For me, It's working
html, body {
overflow-x: hidden;
margin:0px;
padding:0px;
}
if ur having unwanted white space in right side of ur screen its because of overflow so to remove it go to ur css then in body write
in css:
(body{
width:100%;
overflow-x: hidden;
})
this is before
this is after
this is my first help i am new to stackoverflow hope this helps
Related
I'm making a fixed width (120px) website for old feature phones that don't respond to media queries. The width of the body won't change even when I've defined it as 120px. When I open the website on the phone, it shows a huge horizontal scroll bar showing me a lot of blank space on the right which I'm assuming is the body. In the screen shot attached, I've set background color of body to red so you can see the problem (I also had to blackout the content for client privacy).
I'm using the following code:
html {
width:120x;
margin-left:0px;
}
body{
width:120px;
font-family: arial;
font: arial;
margin-left: 0px;
max-width:120px;
}
I think you've a typo here:
html {
width:120x;
margin-left:0px;
}
The width should be 120px
Remove the typo:
html {
width: 120px;
margin-left: 0px;
}
I think you have to use un child to wrap your content with a max-width.
and tags don't allow to do what you want.
HTML
<div class="wrapper">
Your content goes here
</div>
CSS
html,
body {
margin: 0;
height: 100%;
}
.wrapper {
box-sizing: border-box;
position: relative;
padding: 20px;
width: 120px;
height: 100%;
font-size: 14px;
background-color: #d63b24;
color: #fff;
}
http://jsfiddle.net/vinzcelavi/1rx7yn57/
Try this
body {
min-width: 1024px;
}
Here's your fiddle: http://jsfiddle.net/enxRw/1/
Even when I'm using this simple code, the browser shows a little offset on left and top. How to fix this. Code is below:
<html>
<head>
<style="text/css">
#container{
width: 100px;
height: 100px;
background-color:orange;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
It's because most browsers use a standard CSS stylesheet (see http://www.w3.org/TR/CSS21/sample.html).
One of the rules sets the margin of the body to 8 pixels:
body {
margin: 8px;
}
You can disable it by setting the margin to 0 pixels:
body {
margin: 0;
}
See this JSFiddle for more details.
Try to add this css:
* {
margin: 0;
padding: 0;
}
even better:
*{
margin: 0 auto;
padding: 0;
}
This worked for me all the time:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
Make the margin-top and margin-left of html and body 0.
html, body{
margin-top: 0;
margin-left:0;
}
Okay, so I have this code:
footer {
background-color: #359DFF;
text-align: right;
text-decoration: overline;
height: 50px;
width: 100%;
padding: 25px;
margin: 0px;
bottom: 0px;
position: absolute;
}
On this page:
http://ltd.url.ph/
I'm working on a webpage for my school, but the footer seems not to fit the page, also, in the left side, there's a gap, which makes the footer look ugly, as there's a white stripe right at the beggining of the bottom of the page which is not supposed to be there.
Any ideas on how to fix that and make the width adjust itself on all pages ? width:100% won't work for me.
To the body styles, add
padding:0;
margin:0;
Then for the footer, remove the right/left padding by doing this instead
padding:25px 0; /*This gives a top/bottom padding of 25px, and a left/right padding of 0.*/
Also, it would look better if you did text-align:center for your footer.
First of all, when you add the footer padding you enlarging it so remove the padding from the footer and add it to the p.
then you need to remove the height 50px from the footer.
and for final touch set the p margin to 0; and set the padding to :0 25px;
this will give the same look in all browsers with out the need to calc() and other weird css rules
here is the cleanest code for it:
footer {
background-color: #359DFF;
text-align: right;
text-decoration: overline;
width: 100%;
margin: 0px;
bottom: 0px;
position: absolute;
}
footer p{
margin:0;
padding:0 25px;
}
and you don't need the extra div to hold the p.
This Should work for you:
html, body{
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body{
margin: 0;padding:0; float:left; min-width:100%;
}
footer{
background-color: #359DFF;
text-align: right;
text-decoration: overline;
width: 100%;
margin: 0px;
bottom: 0px;
position: absolute;
}footer p{width: 95%;}
So I have come across a problem when I tried aligning my header design fully to the top margin and the left margin. The use HTML and CSS to perform this.
CSS code:
div#headerbox
{
background-color: #a56868;
width:100%;
height: 40px;
position: fixed;
display: block;
margin-top: 0px;
margin-left: 0px;
}
div#headerwrap
{
background-color: #a56868;
width:100%;
height: 40px;
position: fixed;
display: block;
}
HTML code:
<div id="headerbox">
<div id="headerwrap">
<p>TEST 123</p>
</div>
</div>
Why doesnt this code align properly to the edges on both sides as I have put the lenght of the element to be 100%? and how can I fix this?
Set the padding and margin of HTML body in CSS to zero.
body {
margin: 0;
padding: 0;
}
mention
*{
padding:0;
margin:0;
}
in you css file
this will prevent default padding and margin of all block elements.
Apply style margin:0; to the body element.
body{
margin:0;
}
For more information on margin property you can check out this page:
http://www.tutorialrepublic.com/css-reference/css-margin-property.php
{margin:0px; padding:0px;}
body, html {margin:0px; padding:0px;}
Mention this code is css to solve the problem
body { margin: 0; padding: 0; }
For more information How to correctly align fixed header fully to top and left in CSS
I am playing around with CSS Sticky Footer and I have an issue where...
* { margin: 0; }
Although it is designed to reset all DIV margins, this is not what I want to do. The text on every page are squished and have no margins now.
I have tried defining it on every element I want but with no success i.e...
div.wrapper, div.push, div.footer { margin: 0; }
How can I bypass it so only the necessary elements by sticky footer have a margin of 0, and the rest remain untouched?
Delete the * CSS and change the HTML one to:
html, body {
height: 100%;
margin: 0;
}
.footer * {
margin: 0;
}
I don't get it.. why use sticky footer. Try creating a css table structure like this. People underestimate CSS tables! They can be awesome in creating fluid designs..
#wrapper { display: table; height: 100%; width: 1000px; }
#wrapper > header, #wrapper > footer { display: table-row; min-height: 100px; }
#main { height: 100%; }
<div id="wrapper">
<header>
<h1>I'm a header!</h1>
</header>
<div id="main">
</div>
<footer>
<p>I'm a footer!</p>
</footer>
</div>
In this CSS example none of the other elements will be affected and both the footer and header keep their height while the mid section is fluid filling the restspace..
Also take a look at table-cell.. it allowes for horizontal structurs like a solid left side with a fluid main section.
Also to correct the text in the fotter you can edit this CSS:
font: 0.8em helvetica,arial,sans-serif;
Line 50 of the style.css
.footer p {
position: absolute;
left: 0;
bottom: 4px;
width: 700px;
padding: 0;
color: white;
font: 0.8em helvetica,arial,sans-serif;
text-align: center;
}
Why would you use a premade sticky footer if it's been created that easily?
Try:
<footer><span>Footer Content</span></footer>
with the following CSS:
footer{
position:fixed;
bottom:0px;
height:30px;
width: 100%;
z-index: 9999;
color: #595959;
font-size: 9pt;
text-align: center;
}