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.
Related
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;
}
Here's what I'm wanting to do. When the site gets down to medium and small sizes, I want 100% width with margin: 20px all around. I'm trying to not define specific pixels for the width, so that it's consistent across all devices as much as possible. I figured that my CSS would apply the 20px margin to the right side as well as the left, but it's only applying to the left and the right is going outside the window.
Here's my HTML:
<div class="swipe-content">
<div id="your-accounts">
<h1>Your Accounts</h1>
<p>
Your accounts data will go here.
</p>
</div>
</div>
And here's my CSS:
.swipe-content {
clear: both;
width: 100%;
padding: 20px;
background-color: #fff;
margin-top: 20px;
}
Sorry to waste anyone's time with this, but it's late and I'm probably missing something really simple. I'm coming back to coding after a couple of years and any help would be appreciated.
In CSS when you specify a width, it usually means the inner-width not the outer-width.
outer-width = inner-width + margin + padding + border
In your case, your div is becoming 100% + 20px (left padding) + 20 px (right padding)
When you add display: block, the div will automatically try to take up as much width as possible.
Sure, in CSS 3 you could take advantage of the box-sizing property as focorner suggested. But to be compatible i would suggest removing width: 100% and adding display: block.
For this to work, you would need an outer div which has 100% width and is display:block
TL;DR
{
display: block;
// width: 100%; remove this
padding: 20px
}
One simple option would be to use:
.swipe-content {
box-sizing: border-box;
...
}
One way you could do this is by creating an outer div that fills the entire page and setting it to have a left and right padding of both 20px.
You could then put a div on the inside that fits 100% of the outer div.
#outer {
padding: 20px;
background-color: blue;
}
#inner {
width: 100%;
height: 500px;
background-color: grey;
}
Here it is in action: https://jsfiddle.net/SplashHero/cb1xs67u/
you can do like this
.swipe-content {
clear: both;
width: 100%;
padding: 20px;
background-color: #fff;
margin : 20px 20px 20px 20px;
}
I have a container with a repeating image that i want to fill 100% of the available height. Some of the inner divs have their :after pseudo elements absolutely positioned so i can get the borders the way i need them. This is causing an issue with the repeating background of the main container.
Please visit this link and scroll to the end of the page -
http://www.mariage-graham-audrey.com/static.html
Can anyone suggest a possible solution for this ?
Just a workaround but try to add larger bottom padding to layout like this:
.layout {
...
padding-bottom: 180px;
}
Just saw your CSS and I think by adding this you would be able to get a full page background :
background: white url("/bootstrap/assets/images/pattern.png") 0 0;
width: 100%;
margin: 0 auto;
padding: 30px 0;
min-height: 100%;
Just edit the " width:100%; " thats all.
Please Replace your style for layout div with this. It will work
.layout{
background: white url("/bootstrap/assets/images/pattern.png") 0 0;
width: 100%; /* add 100% width*/
margin: 0 auto;
padding: 0 0 150px 0; /*change padding with this*/
min-height: 100%;
}
I have a div(InnerDiv) which contains a grid with paging enabled...
After some user actions , data inside that grid will load and we will have a big grid!
The problem is when grid's data loads , overflow the div's bottom portion(InnerDiv) and some of those data get's displayed out of the div.
my css of body and html like below :
html, body
{
margin: 0; /* get rid of default spacing on the edges */
padding: 0; /* get rid of default spacing on the edges */
border: 0; /* get rid of that 2px window border in Internet Explorer 6 */
height: 100%; /* fill the height of the browser */
border:3px solid red;
}
i need 100% height of body when page loads...
OuterDiv inside body like below :
div#OuterDiv
{
position:absolute;
width: 100%;
height: 100%;
/*height: auto;*/
margin: 0px;
padding: 0px;
top: 0;
bottom: 0;
left: 0;
right: 0;
border:5px solid green;
}
InnerDiv Inside OuterDiv Is Like Below :
div#InnerDiv
{
position: relative;
width: 100px;
height: 100%;
margin: 0 auto;
background: transparent url('../Images/Blue.png') repeat scroll left top;
}
Content Inside InnerDiv Like Below :
#Content
{
position: relative;
top: 10px;
background: transparent url('../Images/Red.png') repeat scroll left top;
width: 550px;
height: 1080px; /*>>>>>>>>>>>>>>>>>>> plz see this line*/
top: 10px;
right: 10px;
padding: 7px;
border: 10px ridge #ce004e;
color: black;
}
that grid(Content) is inside InnerDiv...
EDIT 1
the below example can show my situation :
Here's an example at jsFiddle
we can not remove position:absolute of OuterDiv , by doing that height:auto or height:100% on it does not work at page start -> outerDiv should be 100% because Of InnerDiv Background and remember InnerDiv height is not 1080px at start -> it is only 200px at page load and dynamically it will change to 1080px!
i want to force yellow area (InnerDiv) to fill entire Purple Area...
also InnerDiv Should Have 100% Height Because Of It's Background At Page Start...
i know this problem is about 100% height / but how can i fix that ?
EDIT 2 :
AT LAST HERE IS MY WEB SITE :
MY WEB SITE
plz change the height of red area with firebug - so by changing it to 1080px body and OuterDiv And InnerDiv Will grow.
but at page load i want body and OuterDiv And InnerDiv 100% height.
how can i do that?
thanks in advance
You need less constraints on #OuterDiv. By specifying top, bottom, left, and right, you're locking the edges of #OuterDiv to the edges of body; and your body rule locks body to the same size as the viewport.
Try changing your div#OuterDiv rule like this:
div#OuterDiv
{
position:absolute;
margin: 0px;
padding: 0px;
border: 5px solid green;
}
Here's an example at jsFiddle
From what I could gather from your explanation and styles you basically want this:
http://jsfiddle.net/sg3s/zXSXx/
If this is correct I will also explain what is happening to each div. Else please tell me what div is behaving not as you would like and why.
By the way if possible use absolute paths (whole links) to images. Seeing how they need to fit together will help us all to find something that works for you.
I'm trying to get my horizontal rule to ignore the parent padding.
Here's a simple example of what I have:
#parent {
padding:10px;
width:100px;
}
hr {
width:100px;
}
You will find that the horizontal rule extends out of the parent by 10px. I'm trying to get it to ignore the padding that everything else in the parent div needs.
I'm aware that I could make a separate div for everything else; this is not the solution I'm looking for.
Easy fix, just do
margin:-10px
on the hr.
For image purpose you can do something like this
img {
width: calc(100% + 20px); // twice the value of the parent's padding
margin-left: -10px; // -1 * parent's padding
}
In large this question has been answered but in small parts by everyone. I dealt with this just a minute ago.
I wanted to have a button tray at the bottom of a panel where the panel has 30px all around. The button tray had to be flush bottom and sides.
.panel
{
padding: 30px;
}
.panel > .actions
{
margin: -30px;
margin-top: 30px;
padding: 30px;
width: auto;
}
I did a demo here with more flesh to drive the idea. However the key elements above are offset any parent padding with matching negative margins on the child. Then most critical if you want to run the child full-width then set width to auto. (as mentioned in a comment above by schlingel).
Another solution:
position: absolute;
top: 0;
left: 0;
just change the top/right/bottom/left to your case.
Kinda late.But it just takes a bit of math.
.content {
margin-top: 50px;
background: #777;
padding: 30px;
padding-bottom: 0;
font-size: 11px;
border: 1px dotted #222;
}
.bottom-content {
background: #999;
width: 100%; /* you need this for it to work */
margin-left: -30px; /* will touch very left side */
padding-right: 60px; /* will touch very right side */
}
<div class='content'>
<p>A paragraph</p>
<p>Another paragraph.</p>
<p>No more content</p>
<div class='bottom-content'>
I want this div to ignore padding.
</div>
I don't have Windows so I didn't test this in IE.
fiddle:
fiddle example..
If you have a parent container with vertical padding and you want something (e.g. an image) inside that container to ignore its vertical padding you can set a negative, but equal, margin for both 'top' and 'bottom':
margin-top: -100px;
margin-bottom: -100px;
The actual value doesn't appear to matter much. Haven't tried this for horizontal paddings.
margin: 0 -10px;
is better than
margin: -10px;
The later sucks content vertically into it.
Here is another way to do it.
<style>
.padded-element{margin: 0px; padding: 10px;}
.padded-element img{margin-left: -10px; width: calc(100% + 10px + 10px);}
</style>
<p class="padded-element">
<img src="https://images.pexels.com/photos/3014019/pexels-photo-3014019.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
</p>
Here are some examples on repl.it: https://repl.it/#bryku/LightgrayBleakIntercept
Your parent is 120px wide - that is 100 width + 20 padding on each side so you need to make your line 120px wide. Here's the code. Next time note that padding adds up to element width.
#parent
{
width: 100px;
padding: 10px;
background-color: Red;
}
hr
{
width: 120px;
margin:0 -10px;
position:relative;
}
If your after a way for the hr to go straight from the left side of a screen to the right this is the code to use to ensure the view width isn't effected.
hr {
position: absolute;
left: 0;
right: 0;
}
The problem could come down to which box model you're using. Are you using IE?
When IE is in quirks mode, width is the outer width of your box, which means the padding will be inside. So the total area left inside the box is 100px - 2 * 10px = 80px in which case your 100px wide <hr> will not look right.
If you're in standards mode, width is the inner width of your box, and padding is added outside. So the total width of the box is 100px + 2 * 10px = 120px leaving exactly 100px inside the box for your <hr>.
To solve it, either adjust your CSS values for IE. (Check in Firefox to see if it looks okay there). Or even better, set a document type to kick the browser into strict mode - where also IE follows the standard box model.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
...
http://www.quirksmode.org/css/quirksmode.html
You just need to add negative margins to the child that match the padding of the parent. No need to set a width, change the box-sizing, or use absolute positioning.
#parent {
padding: 10px;
width: 100px;
}
hr {
margin-right: -10px;
margin-left: -10px;
// For modern browsers you can use margin-inline: -10px
}
The reason you don't need to set a width is because the hr element is a block element. It's width defaults to "auto", which means it will expand to fill it's parent (minus padding, margin, and border).
easy fix.. add to parent div:
box-sizing: border-box;