This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
Closed 3 years ago.
I don't quite understand why the footer (and the header) doesn't take up all the space?
I divide the <body> part in 3 sections: 1) div header, 2) div wrapper, 3) div footer (so that I could control each part separately).
Div wrapper (which is supposed to be narrow)
.wrapper {
display: block;
width: 100%;
max-width: 980px;
margin: 20px auto;
padding: 20px;
border: 1px solid black;}
Div footer (which is supposed to be 100% wide on the screen)
.footer {
margin: 0px;
padding: 0px;
background-color: black;
height: 200px;
color: orange;
width: 100%;}
How can I make it cover all the space (like on this website, the header takes all the space, but the main content part is way more narrow).
Thank you in advance!
The footer (which is black) doesnt take up all the space and leaves some background
The footer (which is black) doesnt take up all the space and leaves some background
Seems like you didn't reset the default margin for body which most browsers add by default. To do so, add this:
body {
margin:0;
}
There's more than one way to solve this and there's more than one reason for which the problem could be generated in the first place, so don't tread if different people give you different answers :)
The problem I most usually see when this comes up is generated by a father element not having full width, or having a padding that's bigger than zero. (Probably the body.)
If that's not where the problem lies, then try with these media queries (One at a time).
width: -webkit-fill-available;
width: 100vw
Related
This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
Closed 3 years ago.
I have a white border around my entire website right now that I am trying to get rid of. I looked it up online and found several sources that all say to set margin: 0; but when I did this, it is not removing the white border. I suspect it has something to do with using view width and view height instead of pixels or percentages, so how can I remove the white border without changing the width and height from using the viewport size?
.container {
width: 100vw;
height: 100vh;
background: purple;
margin: 0;
}
<div class="container">
</div>
you have to set the margin: 0 property on body not on the div container, hope it helped
body {
margin: 0;
}
.container {
width: 100vw;
height: 100vh;
background: purple;
}
<div class="container">
</div>
* {margin: 0; padding: 0}
I recommend checking basic universal css boilerplate
This question already has answers here:
How to remove margin space around body or clear default css styles
(7 answers)
Closed 4 years ago.
I've got several divs on my webpage with background images. Currently it's what I want, but with white borders on the side and top/bottom (for those divs at the top/bottom of page).
This is the current situation:
My webpage - notice slight white border around photo
I'm trying to get it to fill the browser (instead of having borders), but none of the other suggestions are working for me. Below is my code for one div:
<div class="header-image">
<img src="smesh-colour-hires.png">
</div>
And CSS:
.header-image {
background-image: url("animals-deep-ocean-deep-sea-130621.jpg");
background-size: cover;
background-position: center;
height: 500px;
margin: auto;
display:flex;
align-items:center;
justify-content:center;
}
.header-image img{
max-width: 800px;
}
Let me know if anything doesn't make sense and I'll try my best to explain.
Any help would be much appreciated, this is really blocking me!
The white border is probably due to the default margin on the body.
Try adding this in your CSS.
body {
margin: 0;
}
Add this to the top of your CSS
body, html {
margin: 0;
padding: 0;
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I've tried this seven ways from sunday and I keep coming up short.
Bands of color or what have you that extend to the limits of the visible page seem to be a very common request in internet forums / blogs, however for each of the two main scenarios I'm running into equally frustrating issues that render either solution untenable. In my frustration I've turned here.
HTML
<body>
<div class="container"></div>
<div class="content-container">
<div class="content">
Hello, I need some text that extends for a bit, so I'll just write this in the div and all will be good.
</div>
</div>
<div class="container"></div>
Scenario 1
You set a container div at width: 100% and then a child div at a fixed width and margin: 0 auto; this effectively extends that div to the ends of the visibel screen at all times.
html, body {
width: 100%;
}
.container {
height: 20px;
background-color: #377ab7;
margin: 0 auto;
}
.content-container {
height: 100px;
margin: 0 auto;
}
.content {
width: 300px;
}
Scenario 1 issue
When the screen is resized so that the child div's fixed width is too big for the window a scroll bar appears. This is absolutely fine and desired, however when you use the scroll bar the extended bands of color only extend as far as 100% of the visible window.
Fiddle 1 (you need to resize the browser window to surpase the size of the fixed width content div and then use the scroll bar, you'll see the blue bands do not extend past 100% of the window size.)
https://jsfiddle.net/b1dht69u/2/
Scenario 2
You set the overflow-x: hidden on the body and then run a very high negative margin, with a corresponding positive padding.
body {
overflow-x: hidden;
}
.container {
height: 20px;
background-color: #377ab7;
margin: 0 -9999px;
padding: 0 9999px;
}
.content-container {
height: 100px;
margin: 0 -9999px;
padding: 0 9999px;
}
.content {
width: 300px;
}
This is absolutely great until again you try to resize the screen.
Scenario 2 issue
When you resize past the size of a child div's fixed width no scroll bar appears.
Fiddle 2
https://jsfiddle.net/mnodvLvg/1/
What I am looking for is the best of both worlds. I am hoping to have a bar of color that extends to the ends of the visible page at all times, yet when a browser is resized past an inner divs fixed width a scroll bar appears.
This is a curious problem, and one that I never gave much thought since I mainly work with responsive layouts.
However, there is a nice article by Nicholas Cerminara about dealing with fixed-width layout issues.
The key to this is setting a min-width on body{} and/or html{} in your CSS.
Interestingly, Stack Overflow uses this technique to prevent their top navigation bar from breaking when you resize the window. Just open your web browser DOM explorer on this website and disable the following style rules:
body{min-width:1030px;} and html{min-width:1000px;}
You will see the top nav bar break its layout and have the same issue you are experiencing.
this scenario 2 with 9999px stuff is actually very dirty, forget it.
If you inspect the div, you'll see that the problem doesn't come from the div.container itself but from the body.
I would solve this with:
html, body {
position: absolute;
min-width: 100%;
width: auto;
}
As a reminder, don't forget that the ID must be unique. Better use class in this case.
An other idea could be to forget those .container DIVs and actually make borders for .content-container, but I don't know what you exactly would like to do.
#content-container {
height: 100px;
margin: 0 auto;
border-top: 20px solid #377ab7;
border-bottom: 20px solid #377ab7;
}
Good Luck' !
If you have a fixed width for the content div, you may as well set a min-width of the same value or larger on the body tag. This will guarantee it can't be smaller than your content.
html, body {
width: 100%;
min-width: 300px;
margin: 0;
}
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
On my website I have whitespace on the right of my page, but all widths in the page are set to 100%, including the color of the page. So even if there was a width that was extending outside the page, this part should be the same color as the rest.
I am using an anchor based website, and if you look at it http://www.jeremyspence.net78.net/ you can see that only on the first anchor is there whitespace on the side, but there is extra space on the side all the way through (obviously). I don't want either the whitespace or the extra space, but the whitespace is perplexing. And yes I have margin: 0; and padding: 0;
Understanding the box-model
In your site, the classes websitecontainer, packagecontainer and mecontainer all have the following style rules:
...
width:100%;
padding:50px;
...
This literally means that they should span the full width of their container (the body in this case) and then the browser should add 50px of padding around that width. This is the way it should be according to the W3C standard box-model that is used by modern browsers. In outdated versions of IE, the box-model would have worked the way it is currently setup in your page and the padding would have been subtracted from the width.
See the illustration below to understand the difference:
The solution
The straight forward solution would be to remove the padding from these containers, eliminating the extra width and redundant spacing. If you require that padding, you can simply wrap the contents of the current containers inside another container and apply the padding to this new inner container. For example:
<div class="some-container">
<div class="inner-container">
<!--Content goes here as before-->
</div>
</div>
With the style rules now being:
.some-container {width:100%;}
.inner-container {padding:50px;}
Your CSS here:
.homecontainer {
background:#ffe6ce;
width: 100%;
height: 1080px;
padding-top:50px;
}
Should maybe be:
.homecontainer {
background:#ffe6ce;
width: 100%;
height: 1080px;
padding: 50px 0 0 0;
margin: 0;
}
Note the addition of margin and the reworking of your padding to be shorthand format which basically runs clockwise from the top: 50px (top) 0 (right) 0 (bottom) 0 (left)
Replace your current CSS code for these styles with this
.websitescontainer {
width: 100%;
height: 1080px;
background: #cefece;
}
.packagescontainer {
width: 100%;
height: 1080px;
background: #cefefe;
}
.mecontainer {
width: 100%;
height: 1080px;
background: #fecefe;
}
Note: You can make this code in this way
.websitescontainer, .packagescontainer, .mecontainer{
width: 100%;
height: 1080px;
background: #cefece;
}
.mecontainer {
background: #fecefe;
}
It looks like removing
padding: 50px;
from .mecontainer solves it.
I have spent hours looking for a solution and cannot find anything on this particular issue, so please forgive me if it has been answered.
I have a standard CSS page with a masthead, a navigation row, a left column for links, a right column for contents and a footer.
I have set everything to the center of the page at 1024px wide.
What I just cannot achieve is to have the 2 columns stay at the same height when one has longer content than the other.
Let me explain this - both columns have a 1px border that I would like to extend all the way down to the footer. The right column has much longer content so it reaches the footer very quickly but the left column doesn't so the border stops, where the links finish.
To fix this problem I have set the heights to 100% in the html, body, container and the two columns as follows:
html {
height: 100%;
}
body {
height: 100%;
}
#masthead {
width: 1024px;
height:100px;
margin-left:auto; margin-right:auto;
}
#top_nav {
width: 1024px;
height:100px;
margin-left:auto; margin-right:auto;
}
#container {
width: 1024px;
height:100%;
margin-left:auto; margin-right:auto;
}
#left_col {
width: 198px;
float: Left;
height: 100%;
border: 1px solid #FF0000;
}
#page_content {
margin-left: 200px;
width: 824px;
height: 100%;
border: 1px solid #000000;
}
#footer {
bottom: 0px;
clear: both;
width: 1024px;
height: 50px;
margin-left:auto; margin-right:auto;
border: 1px solid #000060;
}
This works BUT now the content of the right column (which is much longer) goes way past the footer? and no matter what I try I cannot fix this without affecting the left column's border i.e. I can use min-height: 100%; which fixes the overflow and footer problem, BUT this has the side effect of capping the border on the left column back to the Navigation link's height i.e. so the border no longer flows to the bottom of the left column and down to the footer (grrrhhh!)
Here is a link to the page itself which you can copy and paste into DW or EW etc. to see what's going on:
http://www.iifuture.org/downloads/testzzz.html
If anyone knows how to fix this paradox I'd love to know about it!
Thanks
Shaun
Actually scratch that : remove the height:100% on the container, left col and page content. That's it.
Edit(revised answer after discussions)
This article helps.
style="background: blue url(someimage.png) repeat-y left;"
Add the above style to container. This is a hack, the DIV doesn't grow but the background image covers it up to get the layout you want!
Please refer this question and answer selected to learn more.
Original answer
Please take a look at overflow property. I was able to get your example page working with the below style added to page_content DIV.
position:absolute;overflow:auto;
With this code the scrollbars appear if the content exceed the height set. If you do not want to get the scrollbars and are okay with not showing the data beyond the DIV height, just use hidden instead of auto. Likewise, to display the scrollbars at all times, you may use scroll.
The last option visible will make it *(mis)*behave the way it is behaving right now i.e. letting the data grow beyond the DIV height. Notice that the DIV is not growing, only the content is.