I was playing with a slideshow in jQuery today. I managed to create it when I noticed strange thing. The div #feature in which the slideshow is placed seems to be somehow glued to its parent element #content. When I add margin: 10px auto to the #feature div, the #content div is also lowered down by 10px relative to its parent element.
Can anyone tell me what have I done wrong here?
Providing you with the whole code would create a mess, but here's a link:
CSS for #feature:
#feature {
width:940px;
margin: 10px auto;
position: relative;
height:500px;
overflow: hidden;
clear: both;
box-shadow: 0px 0px 5px 2px #000;
}
and CSS for #content:
#content{
min-height:800px;
background-color: #fff;
}
My friend noticed an interesting thing. If you add margin-bottom: 30px to #menu the empty 10px space in content is filled correctly although the margin problem is still not solved.
position: relative does just that... makes any element that this applies to have its position become "relative" to its parent container.
#feature is a child of #content, so #feature's position becomes relative to the position of #content. When you add that 10px margin to #feature, it moves down 10px from #content.
Try adding overflow:auto; to #content. It may help.
Adding overflow prevents margins from collapsing
In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin.
from https://www.w3.org/TR/CSS2/box.html#collapsing-margins
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
On http://www.posterlion.com/ the left side disappears when you make the window smaller by the browser. The horizontal scrollbar appears though but I can't get to it anymore by scrolling to the left. The content is centered through a absolute div. How do i prevent this from happening?
position:relative;left:50%;margin-left:-517px;
width:1015px; overflow:visible; background-color: #FFFFFF; padding: 10px;
The best practice to centered tour layout is using margin: 0px auto instead of absolute positioning.
In your case you should remove your absolute positioning, create some div which contain all your layout (<div id='wrapper'></div> can be standard in this case) and set its margin to auto.
By:
#wrapper {
margin: 0px auto;
width: yourWidth;
}
In your given CSS add
min-width: 1050px;
Here is Css to update :-
#lwe {
width: 1015px;
overflow: visible;
background-color: #FFFFFF;
padding: 10px;
margin: 0 auto;
}
I have 2 divs, one nested inside of the other. According to the page design, the nested div needs to appear to be "on top of" the parent div, as in:
(source: cloudfront.net)
I've got the CSS coded for both elements, using a negative top margin on the nested div to attempt to simulate the desired effect. However, instead of appearing outside of the parent's bounds, the nested div's top 10px or so are getting cut off, as in:
(source: cloudfront.net)
I don't want to position the element absolutely, because a goal for this page is that it be responsive.
HTML for divs:
<div class="container-div">
<div class="child-div">
...
</div>
</div>
CSS for the divs:
.container-div {
padding: 10px 10px 0;
}
.child-div {
display: inline-block;
width: 100px;
height: 60px;
margin: -15px 10px 0;
border: 1px solid #efefef;
background-color: #fff;
}
You don't need to apply position:absolute to the nested div.
And margin probably wouldn't be the best practice in this case.
Just add position:relative to the nested div, and set it's top to any number you want. In your case, it would probably be negative.
Check out this Fiddle.
overflow: hidden on the parent would have done it perfectly !
Hello I have a wrapper div around three float div, I want to wrap the wrapper around these divs,but I can't completely wrap them, I have given a top :25px to the floating div ,so this div overflow exacltly 25 px below the wrapper,
Here is my page http://jsfiddle.net/vpcxP/ ,see how floating div overflow the main container div at the bottom
PS:I don' t want to give overflow:hidden
have you tried adding padding to the bottom of #mainContainer?
For #mainContainer instead of height:auto use overflow:auto
#mainContainer
{
overflow:auto;
width: 835px;
margin:0 auto;
position:relative;
top:50px;
background-repeat:no-repeat;
background-image:url("Images/mainContainerBG.jpg");
box-shadow: 3px 10px 20px 5px #000;
}
you also may need to adjust the width. Set it around 900px.
You seem to have redefined style for .column. remove that property and use this for column.
.column
{
width:280px;
height:452px;
top:25px;
float:left;
left:5px;
box-shadow:3px 10px 7px 3px #4f4848;
background-color:#2c2b2b;
margin-left:5px;
}
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