I have a really dumb question to ask.
I am trying to make a div span 100% of the width of a webpage, but it doesn't reach. I want it to be dynamic (not specify the width in px) and I definitely don't want it to make a horizontal scroll bar appear.
I'm trying to make something similar to Stack Overflow's 100% page width 'alerts' which tell you when you've earned a new badge.
Screenshot of my site:
Code for the pink banner div
<div width='100%' style="padding:0px; background-color:FF0099; background-image:url('pics/pink_bg.png'); ">
</div>
your html body tag might have padding or margin css. you should set those to zero(0). I hope it will help.
Looks like you have padding on your body, which is preventing the div from expanding all the way.
In your css file, ensure that you don't have any padding on the body. If you don't have anything you can try adding this:
body {
padding: 0;
margin: 0;
}
Just add a css for the body to remove the padding and margin:
body {
padding: 0px;
margin: 0px;
}
Also you can apply just to left, right top and bottom margins:
body {
padding-top:0px;
padding-right:0px;
padding-bottom: 10px;
padding-left: 0px;
}
Type
body {
min-height:100%;
height:auto;
margin:0;
padding:0;
}
at the beginning of your CSS file.
I was having the same issue, I had a great big white line on the right hand side of my page. I found the following which was a life saver:
html, body {
width: 100%;
padding: 0px;
margin: 0px;
overflow-x: hidden;
}
Actually it's quite easy. Make sure the parent container for pink banner div has 0 padding and 0 margin. In this case I'm assuming the container for your pink banner is just the body tag. Now copy the following snippet inside your head section of the page.
<style type="text/css">
body
{
margin:0px;
padding:0px;
}
</style>
The html for your pink banner is also not correct. Replace
<div width='100%' style="padding:0px; background-color:FF0099; background-image:url('pics/pink_bg.png'); ">
</div>
with
<div style="padding:0px; margin:0px; width=100%; height:25px; background-color:#FF0099; background-image:url('pics/pink_bg.png');" >
</div>
A the beginning of each CSS document I always type:
html, body {
padding: 0;
margin: 0;
}
I never have any problems with unwanted outer margins or padding with that code.
Related
This question already has answers here:
How can I remove space (margin) above HTML header?
(8 answers)
Closed last year.
I have a very simple header:
<header>
<h1>Hello Everybody</h1>
</header>
And I have this CSS:
html, body {
margin:0;
padding:0;
height:100%;
width:100%;
}
header {
background:lightgray;
margin:0;
padding:0;
height:100px;
position:relative;
}
But, I can not position my header on the top of the page. There is some blank space left.
I don't know why is that. Please help.
The h1 tag you have in your header has a default .67em margin. You need to set your h1 tag to margin-top: 0px; in order to get rid of the extra white space.
html, body {
margin:0;
padding:0;
height:100%;
width:100%;
}
header {
background:lightgray;
margin:0;
padding:0;
height:100px;
position:relative;
}
h1{
margin-top: 0px;
}
That should do the trick.
It's because your <h1> still has margins on it.
h1 {
margin: 0;
}
EDIT:
Just as a quick note, if you only want to remove the top margin, do what #amol posted below, margin-top.
margin: 0 is shorthand for margin: 0 0 0 0, which combines all margin directions as such: margin: top right bottom left.
The <h1> tag within the header has a top margin which is pushing your <header> tag down.
Heading tags have default margin, you can use following code
h1{
margin-top: 0;
}
This is why it is a good practice to use a reset css file to eliminate default formatting applied by the browser: http://www.cssreset.com/.
Use bottom margin only, remove top margin
h1{
margin: 0 0 15px;
}
By default the h1 tag comes with a margin, all you have to do is to remove that margin, also some browsers like Google chrome add a default margin so you will also have to remove that margin from the body tag.
html, body {
margin:0px;
padding:0px;
}
h4 {
margin:0px;
padding:0px;
}
I hope this helped
This is due to the nature of your h1 tag. It automatically applies some sort of margin, based on what browser you're using.
To remove the gap use the following within your CSS:
h1 {
margin: 0px;
}
For the future you want to use Google Chrome or Firefox+Firebug and use the built-in tools to look through all elements within a webpage. It'll save you a lot of time and increases your efficiency.
Long story short, I am creating a webpage that has a fixed wrapper <div> across the top and a small amount of "content" underneath it that you can scroll up and down from.
Problem is that my "content" <div> doesn't start from the bottom of the wrapper <div> but further up the page underneath it
Here's an example: jsfiddle
#wrapper {
background-color: #327bb7;
margin: 0 auto;
position:fixed;
color:#FFFFFF;
line-height: 100px;
width:100%;
height:100px;
}
Because of the:
position:fixed;
Add for example:
position: relative;
to #content.
or
position: absolute;
top: 100px;
the last if you want to append the content below the fixed area.
add padding-top : 100px Or whatever you want
but basically the padding will be the height of the wrapper.
#content {
padding-top : 100px;
}
Depending on the requirements of your layout you might want to try something like this.
document.getElementById("content").style.marginTop = document.getElementById("wrapper").style.height;
Just a simple image that uses some jQuery to fade some content over the top when moused over.
Only problem is that when the hover over takes effect, the hover spills into the div gutter making the hover over bigger than the actual container.
each image is layed out like so
<li class="large-4 columns item">
<div class="description"><h1>Image hover</h1></div>
<img class="display" src="http://placehold.it/400x300">
</li>
Can see a live example here.
http://jsfiddle.net/QLUMH/
Any ideas on ways to fix/improve what I am doing here? Cheers
Demo
Here you have live example,
you are giving 100% to width and height.
so that really goes overflow.
Code edited-
#portfolio .description {
position: absolute;
background: rgba(0,199,134,0.8);
display: none;
width: 400px;
height: 300px;
}
The issue is that your description fills the entire column, which is wider than your image. If you add an "inner column"/container that collapse to the same width as your image, it will work alright. I've created a fork of your demo that demonstrates this.
I've added a wrapper "ib" (Just stands for inner block. rename this to a proper name) inside each .column.item like so:
<div class="ib">
<div class="description">
<h1>Image hover</h1>
</div>
<img class="display" src="http://placehold.it/400x300">
</div>
And then just created a very simple CSS rule for making this wrapper collapse to its contents:
.ib {
display: inline-block;
position: relative;
}
You did not style your li. The issue is that in foundation.css it is getting padding-left and padding-right. You need to remove that and use margin-left and margin-right instead. And you also need to fix the width of the li. As .description will get its 100% height. So you need to include a small css in your own file (don not modify foundation.css).
#portfolio li.columns{
/* You can use the width in '%' if you want to make the design fluid */
width: 400px;
padding: 0px;
margin: 0px 0.9375em;
}
Fiddle
You'll just have to get rid of the padding on tne li
li{ padding:0 }
or use the the box-sizing property:
`li { box-sizing:border-box; -moz-box-sizing:border-box; }
Change in CSs will help,
I have updated the same in fiddle
with change in CSS,
#portfolio .description {
position: absolute;
background: rgba(0,199,134,0.8);
display: none;
width: 400px;
height: 300px;
}
#portfolio .description h1 {
color: white;
opacity: 1;
font-size: 1.4em;
text-transform: uppercase;
text-align: center;
margin-top: 20%;
width:400px;
height:300px;
overflow:hidden;
}
Update:
If the H1 created extra cutter and wrapping issue(for some), please use the DIV tag instead, which should work fine!
I hope this will solve your problem :)
I have a site that has the following structure:
<div id="page_wrapper">
<div id="header"></div>
<div id="content-wrapper"></div>
<div id="footer"></div>
</div>
Now I have set html, body and page_wrapper to 100% in CSS. The goal here is to get the footer to be at either the bottom of the content or the bottom of the window -- whichever is visually lower. I've read a lot of things about how to do it, but I can't seem to get it to work correctly.
html, body, #page_wrapper { height: 100%; }
#page_wrapper {
width: 864px;
margin: 0 auto;
min-height: 100%;
background: url('path/to/image') repeat-y;
}
#content-wrapper {
position: relative;
width: 824px;
min-height: 100%;
margin: 0 auto;
}
#footer, #header {width: 824px; margin: 0 auto; }
#footer {
border-top: 4px solid #000;
position: relative;
margin-top: -7.5em;
}
It sorta seems to work. But problem I am seeing is, that if I zoom out my page_wrapper seems to almost reset its height to 100% but as I zoom in, it gets shorter and shorter and shorter causing overlap in the footer and content text instead of pushing the footer down.
Any idea how to repair something like that? I'm at my wits end with it trying to google up an answer...
Updated my answer with a test html, works quite fine in chrome 13. I tried zooming in and out and the footer stays put.
You should put your footer outside of the page-wrapper. Then give it a negative margin equal to the height of the footer. You can change the height of either the header or the content-wrapper to see the footer stick to the bottom of the page-wrapper instead of the browser window. If you open the html as is you will see the blue footer sticking to the bottom of the page and the page-wrapper taking up 100% of the window.
Please note that this is broken without a fix in Firefox 4 and 5. Also it doesnt work in IE 5.5 and earlier.
To make this work properly in IE6 add height: 100%; to #page_wrapper
<html>
<head>
<style type="text/css">
body, html {height: 100%;margin:0;padding:0;}
#page_wrapper {min-height: 100%; background-color: red;}
#header{height: 200px; background-color: green;}
#content-wrapper{height: 200px; background-color: yellow;}
#footer {height: 7.5em;margin-top: -7.5em; background-color: blue; position:relative;}
</style>
</head>
<body>
<div id="page_wrapper">
<div id="header"></div>
<div id="content-wrapper"></div>
</div>
<div id="footer"></div>
</body>
<html>
live example of this can be found on:
https://www.effacts.com/effacts/public?context=107
a proper sheet and html can be found here:
http://www.cssstickyfooter.com/
Does this help:
css sticky footer in an asp.net page
absolute position the footer div...
In #footer css try adding clear:both;
or
add in footer CSS right after position: relative; bottom:5px;
With position: relative you can actually use, top, right, bottom and left.
If you always want it at bottom you can put in as bottom:5px; If you want it at the bottom center then you can put in bottom: 5px; and right or left ...
5px above is just an example you can change pixel to as many as you want.
Furthermore, you can also have clear:both with it there as that clear make sure there is no other content that would override it.
I want my footer to take height same as the remaining bottom space. Currently I'm using following css for footer:
clear: both;
float: left;
background-color: #1F1102;
color: #E4F2FA;
min-height: 60px;
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
padding: 0;
padding-top: 10px;
text-align: left;
width: 100%;
min-width: 1000px;
margin: auto;
The result is:
Here as you can see the black has take only minimum height. I want it to take whole remaining space after it [that is marked with question marks]. Which changes do I have to make to get this?
note:- I don't want to give position:fixed to make it stick to bottom.
Well, the short answer is, You Can't!
The longer answer? You can fake it.
Why can't you?
Because a block level element is not able to strech and fill a space in height.
Fake it how?
Use the same background color as the footer for the container (or the same background image), that will cause it to appear like it's always fills up the entire space.
This is now possible with flexbox using a method similar to what is described here https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/. Do this, except put the flex-grow: 1 in the footer element instead of the content element (in the article it's listed as flex: 1).
You don't really can make a block-element span to the full height available in CSS. Best way is find use some workaround, which looks alike.
For example you may use a background-color (for the body/wrapper) or a centered background-image positioned to the bottom…
This worked like a charm for me (originally from how-to-keep-footer-at-bottom-of-page-with-css):
Put this in your css:
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
background:#ededed;
padding:10px;
}
#content {
padding-bottom:100px; /* Height of the footer element */
}
#footer {
background:#ffab62;
width:100%;
height:100px;
position:absolute;
bottom:0;
left:0;
}
Then in your index/master/_layout/whatever:
<body>
<div id="wrapper">
<div id="header">
</div><!-- #header -->
<div id="content">
</div><!-- #content -->
<div id="footer">
</div><!-- #footer -->
</div><!-- #wrapper -->
</body>
I had the same type of problem. What worked for me was to add a few pixels of padding to the footer and it ended up taking up the bottom of the page.
This is what did it for me:
footer{
padding-bottom:10px;
}