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.
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!
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;
}
like many others looking for CSS height solutions, I've had this issue on and off throughout the years. A simple jsfiddle is worth a thousand words:
http://jsfiddle.net/7dcjn/1/
I understand how to use height: 100% on the html and body to achieve partially what I would like to do. I also just found out about the CSS3 box-sizing property, which again, fixes some of the issues.
However, I still have the issue where if you have a top header div1 that is 50px in height, then have a div2 below that with 100% height, the browser makes the div2 100% of the viewport height which then of course makes div2 run outside the body. See the jsfiddle above or code below.
<div id="MainBody">
<div id="TopHeader">My Top Header</div>
<div id="ContentWrapper">
How does one get this blue box to extend only to the bottom of the viewport/browser window? In other words, the blue border needs to extend right up to the green box.
</div>
</div>
html, body {margin: 0; padding: 0; border: 2px solid #00CC00;}
html, body, #MainBody, #ContentWrapper {height: 100%; min-height: 100%; box-sizing:border-box; -moz-box-sizing:border-box;}
#MainBody {margin: 0; padding: 0; border: 2px solid #CC0000;}
#TopHeader {height: 50px; background-color: #303030; padding: 10px; color: #FFFFFF;}
#ContentWrapper {margin: 0; padding: 20px 20px 0 20px; margin: 10px 10px 0 10px; border: 2px solid #0000CC;}
Any suggestions? Thanks!
I think this is the closest you'll get to actually fitting the box to the remaining space, that is to have the box fill the whole space and float the header over top of it so that the content gets pushed out of the way.
This is a better solution than calc() because the size of the header does not need to be set in order for this to work.
So you need to make a few modifications, TopHeader needs to be float:left;width:100%; and the margins on the ContentWrapper need to be changed so that it doesn't get pushed off of the bottom.
See my JSfiddle
To adjust the spacing below the header for when the content starts you need to adjust hte bottom margin on TopHeader
Here's an Example
Here's your solution bro:
The first styling of the css of the "contentWrapper" was false.
http://jsfiddle.net/xbV9A/
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
}