Good evening,
I have a question that has been bothering me for a while. I have 2 divs, 1 is menu wrapper and the other one is main content div. they have the following CSS code:
*{
margin:0px;
padding:0px;
}
#menu{
height:6%;
border-bottom: 4px solid #3D3D3D;
}
#mainContentDiv{
height:93%;
padding: 0.5%;
}
With the following code I get an overflow (scroll bar), which I would like to avoid. After a little Googling I've found that box-sizing: content-box; is supposed to fix it, but apparently it doesn't (or I'm doing something wrong).
Is there any way to fix this, without having any overflow or fixing the overflow with CSS?
Without the rest of the page I cant say for sure but try the overflow: property in CSS;
http://www.w3schools.com/cssref/pr_pos_overflow.asp
CSS example:
div
{
width:150px;
height:150px;
overflow:hidden;
}
I guess you have this situation : http://jsfiddle.net/rHBq2/2/.
Then you have scroll beacuse total height is calculated this way:
6% of #menu
+
4px border of #menu
+
93% of #mainContentDiv
+
1% padding of #mainContentDiv
=
100% + 4px
Then you have extra space in addition to the 100%. You can solve that with box-sizing:
#menu{
box-sizing:border-box;
height:6%;
border-bottom: 4px solid #3D3D3D;
}
#mainContentDiv{
box-sizing:border-box;
height:94%;
padding: 0.5%;
}
The demo http://jsfiddle.net/RDExD/
Related
I am starting to work with css and have basic issue.
I have a div element:
.top {
background-color: #3B5998;
margin-left: 0px;
margin-top: 0px
}
<div class="top">...</div>
The colour code is taking effect (good).
The problem I have is that there seems to be a bit of white space on left, top and right of the div. How do I get rid of the white space? For example if you take a look at Facebook page, the top part is completely blue, there is no white space at the top.
You need to reset both the default padding and margin attributes in your stylesheet:
html, body {
margin: 0;
padding: 0;
}
As #Jason McCreary mentions, you should also look into using a reset stylesheet. The one he links to, Eric Meyer's CSS reset, is a great place to start.
It also looks like you're missing a semi-colon in your css, it should look as follows:
.top
{
background-color:#3B5998;
margin-left:0px;
margin-top:0px;
}
There's padding on the <body> of the page. You can fix this like so:
body
{
padding: 0;
}
I had the same problem . just try this :
html, body {
margin-top:-13px;
}
If you need some padding inside the div, you should choose padding:
padding:top right bottom left;
example:
padding:5px; /* 5px padding at all sides)*/
padding:5px 3px; /* top & bottom 5px padding but right left 3px padding) */
padding:5px 3px 4px; /* top 5px, bottom 4px padding but left right 3px) */
padding:1px 2px 3px 4px; /* top 1px, right 2px bottom 3px & left 4px) */
Similarly to control the space outside the div, you can use margin.
Margin will use exact same formula.
After long time I found the correct solution for me:
html, body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
We need define the overflow in the horizontal.
If other answers don't work, try position:absolute; top: 0px; left: 0px; or display:flex.
I used this and it worked for me:
body {
background-position: 50% 50%;
margin:0px;
padding:0px !important;
height:100%;
}
the issue i had lately also, but even though i used padding:0px even added the !important on body didn't solved it... the actual problem was its position ... which you can do by using background-position:50% 50%; or by automatically let it choose the center position of the screen .. which is margin:0 auto; or margin:auto; that solved it for me ... hope for you all also. i realized the margin is what was needed after i tried #HAS's response thanks man ur awesome ... sorry for zombify the post
margin: 0px; would remove all spaces around the element.
padding: 0px; clears the area around the content
you can try:
html, body {margin: 0px; padding:0px;}
body {margin: auto;}
with margin:auto; the browser calculates a margin.
You can also use
* {margin: 0px; padding: 0px;}
this will remove all default margins and spaces. But be careful while using:
position: absolute;
The 'position' property can take 4 values, static, relative, fixed and absolute. Then you can use top, bottom, left, right properties to position your element. This depends on your layout. This link might be useful https://www.w3schools.com/css/css_margin.asp
I want a div to go across the page width no matter the size of one's screen. The problem I'm having is that although the width is 100%, when I view the page it requires scrolling horizontally. I've looked up solutions and tried the suggestions regarding the body element, but I still have this issue. Here are my body and div elements:
body{
background-color: #9F6164;
margin:0px;
margin-top: .6em;
width: 100%;
height: 100%;
padding:0px;
}
#controlpanel {
height:8em;
width:100%;
background-color:#F8DEBD;
padding: 1em;
margin-right: 1em;
border-bottom: 3px groove black;
float:center;
margin: 0 auto;
}
To be clear this is not homework, I'm doing this for a personal project.
Yes, it is 100% width, but the browser also adds 1em of padding to it, so it's now 100% + 1em. You didn't set the box-sizing property and it's content-box by default.
If you want your layout to behave more naturally, add this to your code:
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
Check it here: https://jsfiddle.net/avyxhfcp/
BTW: there is no "float: center;"
You can hide the horizontal overflow using overflow-x. You could also use overflow:hidden, but the code below specifically targets horizontal scroll bar.
body {
background-color: #9F6164;
margin:0px;
margin-top: .6em;
width: 100%;
height: 100%;
padding:0px;
overflow-x:hidden; /* hide the horizontal overflow */
}
The solution cosmonot provided is incorrect and will only cause you problems when your div's content stretches off-screen and you can no longer troubleshoot when there are overflow problems because you won't be able to see a scrollbar horizontally.
The real problem is that your div is using width: 100% to occupy the entire horizontal space available, it is then adding on the padding you specified as extra, this results in the overall width being over 100% which breaks out the body element giving overflow and thus making it horizontally scroll able.
The solution is not to alter your body's overflow property, the solution is to apply box-sizing: border-box; to your control panel div. This will make the width you specify include the padding and margin's you specify.
Example
#controlpanel {
height:8em;
width:100%;
background-color:#F8DEBD;
padding: 1em;
margin-right: 1em;
border-bottom: 3px groove black;
float:center;
margin: 0 auto;
}
In future try not to play around with the body, it's usually what you put into it that needs to be troubleshooted.
I am facing very simple problem with margin-top and its freaking me out. I have simplified my document to make it readable.
Here is my structure of html document
<body>
<section>
</section>
<section>
<div></div>
</section>
</body>
Here is my CSS
section{
width: 100%;
height:768px;
background-color: red;
border-bottom: 1px solid yellow;
position: relative;
}
div{
background-color:green;
height:50px;
width:50px;
margin-top:0px;
}
When div's margin-top is 0, it looks like this:
But when I change it to margin-top to 10px, it looks like this:
I could not point out how that white space is added. Inspection shows that it is the part of body. Section is actually pushed down. I was expecting that small div to be pushed down relative to section. Can anyone explain this weired behavior?
here the fiddle http://jsfiddle.net/suriyag/UhqX9/1/ that has solution for your requirements
section{
position:relative;
width: 100%;
height:768px;
background-color: red;
border-bottom: 1px solid yellow;
position: relative;
}
div{
position:absolute;
top:10px;
background-color:green;
height:50px;
width:50px;
}
did some little changes in your code
From w3.org:
In CSS, the adjoining margins of two or more boxes (which might or
might not be siblings) can combine to form a single margin. Margins
that combine this way are said to collapse, and the resulting combined
margin is called a collapsed margin.
Now to prevent collapsed margin, you should add overflow:auto to the parent element.
try
float: left;
for section tag if you can
http://jsfiddle.net/dcTw3/2/
I'm very surprised: there are tons of posts asking about 100% height situations, but the ones that include *margins in the child element don't yield any workable responses.
Surely this is very common, no? I'm struggling with my margins causing the child element to overflow. See fiddle below.
My CSS is like so:
html, body {height:100%} // definitely doing that one for 100% height issues
div {
box-sizing:border-box; // I like my box model consistent, need only webkit
}
#outer {
border:1px solid #f00;
position:absolute; // this is a requirement
top:40px;
left:12px;
width:300px;
}
#inner {
position:relative; // I'm really hoping to avoid absolute
border:1px solid #0f0;
margin:10px 20px;
height:100%;
width:100%;
}
Fiddle: http://jsfiddle.net/3aPzq/
The prized question is: how to get the child element (green border) to properly be inline of its parent, with correct margins?
You can't use width 100% in the case, because width is calculated before apply the margin. So the inner div will have 300px width, and then 20px margin.
It's better to use only margin parameters:
#inner {
position:relative;
border:1px solid #0f0;
margin:10px 20px 10px 20px;
}
if you wanna have inner box stay inside the outer box, then i wouldn't use margin, instead i'll use padding
#inner {
position:relative; // I'm really hoping to avoid absolute
border:1px solid #0f0;
padding:10px 20px;
height:100%;
width:100%;
}
I am starting to work with css and have basic issue.
I have a div element:
.top {
background-color: #3B5998;
margin-left: 0px;
margin-top: 0px
}
<div class="top">...</div>
The colour code is taking effect (good).
The problem I have is that there seems to be a bit of white space on left, top and right of the div. How do I get rid of the white space? For example if you take a look at Facebook page, the top part is completely blue, there is no white space at the top.
You need to reset both the default padding and margin attributes in your stylesheet:
html, body {
margin: 0;
padding: 0;
}
As #Jason McCreary mentions, you should also look into using a reset stylesheet. The one he links to, Eric Meyer's CSS reset, is a great place to start.
It also looks like you're missing a semi-colon in your css, it should look as follows:
.top
{
background-color:#3B5998;
margin-left:0px;
margin-top:0px;
}
There's padding on the <body> of the page. You can fix this like so:
body
{
padding: 0;
}
I had the same problem . just try this :
html, body {
margin-top:-13px;
}
If you need some padding inside the div, you should choose padding:
padding:top right bottom left;
example:
padding:5px; /* 5px padding at all sides)*/
padding:5px 3px; /* top & bottom 5px padding but right left 3px padding) */
padding:5px 3px 4px; /* top 5px, bottom 4px padding but left right 3px) */
padding:1px 2px 3px 4px; /* top 1px, right 2px bottom 3px & left 4px) */
Similarly to control the space outside the div, you can use margin.
Margin will use exact same formula.
After long time I found the correct solution for me:
html, body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
We need define the overflow in the horizontal.
If other answers don't work, try position:absolute; top: 0px; left: 0px; or display:flex.
I used this and it worked for me:
body {
background-position: 50% 50%;
margin:0px;
padding:0px !important;
height:100%;
}
the issue i had lately also, but even though i used padding:0px even added the !important on body didn't solved it... the actual problem was its position ... which you can do by using background-position:50% 50%; or by automatically let it choose the center position of the screen .. which is margin:0 auto; or margin:auto; that solved it for me ... hope for you all also. i realized the margin is what was needed after i tried #HAS's response thanks man ur awesome ... sorry for zombify the post
margin: 0px; would remove all spaces around the element.
padding: 0px; clears the area around the content
you can try:
html, body {margin: 0px; padding:0px;}
body {margin: auto;}
with margin:auto; the browser calculates a margin.
You can also use
* {margin: 0px; padding: 0px;}
this will remove all default margins and spaces. But be careful while using:
position: absolute;
The 'position' property can take 4 values, static, relative, fixed and absolute. Then you can use top, bottom, left, right properties to position your element. This depends on your layout. This link might be useful https://www.w3schools.com/css/css_margin.asp