On this website: www.giftlab.com
The "Free Shipping" circle at the top (div id: floating-header-button) has position: absolute; top: 10px. Its parent div (headerContainer) has style position: relative; padding: 1px;
If the padding of the parent div (headerContainer) is changed from 1px, to 0px, the child div (floating-header-button) drops down the page by about 20px. What causes this? How can a 1px change to the padding produce a 20px change to the positioning?
If I increase the padding, the circle stays where it is and everything else moves (as I would expect), so why does reducing the padding below 1px produce such a counterintuitive effect?
Without the padding on the .headerContainer, a margin on a sub-element (.logo specifically) collapses with .headerContainer, bumping the entire container down by its margin which is 20px.
Related
I have a problem with my fixed vertical navigation bar. By zooming out the page you will see that my sign up button will be pushed down. I tried everything to get it fixed but nothing worked for me. Does anyone know how to fix it??
I centered the text in the button, maybe that is why it is pushing the whole button down??
text-align: center;
vertical-align: middle;
line-height: 40px;
JSFIDDLE
it's the border-right, that's causing the issue.
It will be more than 100% of the width for the browser if you add 49% + 50% button width + 1px border, but you can just use a box-shadow, since it's not affecting the box model:
#navigation #package .inloggen {
width: 50%;
box-shadow:inset -1px 0 0 gray
}
demo: https://jsfiddle.net/L2pdvays/3/
Set box-sizing property to border-box for your divs. Those are getting pushed down because of the additional width of your borders. Border-box makes the total content, padding and border to be 49% instead of just the content and padding.
Basically the 3px border of the Login div is making the total to be 114px wide. That accounts for the 111px of content and padding PLUS the 3px of the border. The total of that div would then be 114px. If your other div is taking up 111px (since it has no borders)... 114 + 111 = 225px which is greater than your container width of 222px.
So to make 50% mean 50% of your TOTAL content + padding + border width, you need to set box-sizing to border-box. Doing so, you will be able to make both your divs 50%.
I have a text area and I added some CSS to it
<textarea watermark="Have a question? ..." class="test-input" rows="4" cols="15" name="">Have a question? ...</textarea>
and CSS applied to it -
.test-input {
border: 1px solid #D0D0D0;
border-radius: 3px 3px 3px 3px;
color: #646464;
float: left;
font-family: Arial;
font-size: 12px;
height: 20px;
margin: 0 0 0 15px;
padding: 5px;
resize: none;
width: 264px;
}
And I get the text area with some padding inside it. In the cases when it works absolutely fine, text area height comes to be 20px with 5px padding not included in height. But, in few cases height of the text area includes padding and the height gets reduced to 8px. I have looked for any css if its overriding it but I didn't find. And I compared the result in both cases. Left is the reduced height and right is the expected height.
I can fix this issue, in other case managing height specifically, adding !important or with help of some JavaScript. But, I am wondering what's the cause here that's making such effect. Why and in which cases paddings are getting included with height or width?
That depends on what box-sizing attribute you have used:
border-box means that the height and width of the box, defined/calculated in CSS, will also include the padding(s) and border width(s) applied to it
content-box is the default behavior, where padding(s) and border width(s) are added onto the defined/calculated height and width of the box.
By setting box-sizing: border-box as seen in your left example, you have defined the height of the element at 20px. This means that the actual content box will only be 8px tall, because the browser will subtract the border (1px top, 1px bottom) and padding (5px top, 5px bottom) form the defined height, leaving only 8px left, which is a tad bit too short to contain height of the entire line (therefore the word appears to be cut off).
jQuery seems consistent with these definitions:
.height() does not include padding (even where box-sizing: border-box)
.innerHeight() includes padding but not border
.outerHeight() includes padding and border
.outerHeight(true) includes padding and border and margin
Each can set or get, e.g. $element.outerHeight(desired_height_including_margins, true);
(Images excerpted from linked pages.)
Refer to https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing,
The box-sizing property can be used to adjust this behavior:
content-box gives you the default CSS box-sizing behavior. If you set an element's width to 100 pixels, then the element's content box
will be 100 pixels wide, and the width of any border or padding will
be added to the final rendered width, making the element wider than
100px.
border-box tells the browser to account for any border and padding in the values you specify for an element's width and height. If you
set an element's width to 100 pixels, that 100 pixels will include any
border or padding you added, and the content box will shrink to absorb
that extra width. This typically makes it much easier to size
elements.
I have following code:
<div style="border:4px solid black;width:100%;height:100px;position:fixed;left:250px;">
out of bound :(
</div>
I want it not to cross the window. I need its right border to stay visible.
JSFiddle link: http://jsfiddle.net/9SZAB/
Remove the width property and instead use right: 0:
div {
border:4px solid black;
height:100px;
position:fixed;
left:250px;
right: 0;
}
Updated fiddle: http://jsfiddle.net/9SZAB/2/
Why this works: position: fixed tells the element to have a fixed position relative to the viewport, so that the positioning properties left, right, top, and bottom, as well as width and height will position and size the element based on the size and boundaries of the viewport.
Previously you had width: 100%, which, combined with position: fixed, means that the element's width should be 100% of the viewport's width. This width is not and should not be affected by any margins or positioning that you also set - the element will still have 100% of the viewport's width, no matter where it is.
But if the element has a width value of auto (which is default), then the positioning properties can be used to size it. Just as left: 250px means that the left side of the element should be 250px away from the viewport's left boundary, right: 0 means that its right side should be 0 (px, em, parsecs - unit doesn't matter for a value of 0) away from the vp's right boundary. Resize the viewport and this state will still be true.
more info: http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
Please note that I am not asking about correcting the problem but instead I want to know how floated div is getting margin when wrapper div has 0px border set. But when wrapper div has 1px border set then floated div doesn't get margin but in both cases secondDiv gets top margin as intended.
Please note that I understand margin collapsing topic but what it has to do with setting border?
<div id="container">
<div id="firstDiv">FIRST Div inside CONTAINER</div>
<div id="secondDiv">SECOND Div inside CONTAINER</div>
</div>
body{
width: 780px;
margin: 00px auto;
}
#container {
border: 1px solid orange; /* but when its set to 0px then floated div gets margin too*/
}
#firstDiv{
float:left;
}
#secondDiv{
margin: 14px;
}
http://jsfiddle.net/dmpxw/
Now, if border of wrapper div is set to 0px then floated is pushed downward too. But I think shouldn't it stay there like in previous case?
http://jsfiddle.net/dmpxw/1/
This is an interesting one.
When the container has a border, the margin of the second inner div runs from the border - i.e. the margin applies from the border onwards. This is because the border is the last item that applies before the margin measurement.
When the container does not have a border, the margin of the second inner div runs from the last item, which is now the body. So the margin is now OUTSIDE of the container, so the container is now actually further down the page - the first inner div has no margin, and is right at the top of the container - it is the container itself that has moved in the second case.
If you add a background color to your example, you can see that when you have a border the margin is inside the container, and when you have no border the margin is outside the container. View the example on JSFiddle.
I need to make sure that two elements always 100 pixels apart. There are no errors with my code, but for some reason the margin-bottom on the the P tag is set to 50 pixels and the margin-top on a DIV below it is also set to 50 pixels.
Instead of being a total of 100px apart, they are only 50. Can someone explain this? I do not have any floats on the page so it's not due to a clearing issue. All html and css has been validated.
This happens in the latest version of Chrome and FIrefox 3.6.
Here's an example of my code:
#content p {
margin-bottom: 50px;
}
#content #posted {
border-top: 1px dotted #ccc;
line-height: 20px;
margin-top: 50px;
}
Margins overlap on top of each other. The maximum margin of the elements will be the margin between two elements.
If this is not what's happening in IE, it's an IE bug, as this is how CSS was designed to work.
You could use padding instead, or just make sure the margin of both elements is 100px.
Margins do not stack like that. The bottom element only sets a 50px margin from the top element, not the top element's margin. Therefore you need to make the margins 100px.