Hi everyone as you can see on screenshot container padding including scrollbar width. When I set padding-left : 0 to container its going to outside of webpage which means search icon stays under of scrollbar Help me please.
code here
Padding values add to the width of your container. So if your container width is set to 1210px with 15px padding on both sides, the rendered width of your container is 1240px. You can subtract the padding values from your width, making it 1180px.
Related
I am trying to add an animation to my site in which a div's width is decreased from its initial value to 0. This works great, except that a small sliver of the div remains after the animation. I discovered that the remaining width of the div is equal to the horizontal padding of the div plus the width of the border. After some further digging it appears this is the expected behavior of the div! Now, my question:
How do I set the width of a div to zero and have that ignore horizontal padding and border width? I have tried things like changing the box-sizing and messing with negative margins but have had no luck. Any help is appreciated. Thanks!
I have a fixed sidebar and I want to stick a div to the bottom of it only if there is enough vertical space available.
If there is not enough vertical space the fixed div should not overlap the previous element, instead it should be on the flow and generate a scrollbar instead.
Any ideas?
You should look at the div that refers to your sidebar and apply a minimum height to it in your CSS.
#sidebardiv{
min-height: XXXXpx; <--- Where the number of pixels is at least the
} combined height and margins of all 3 boxes.
So I was coding using Semantic-ui, and I have two toggle boxes (check boxes) next to each other in a flexbox container. When the window size is reduced, they wrap around so that one is on top of the other.
To get them to spread out a little, I added both right and bottom padding of around 5px. However I noticed a strange behaviour. Padding would cause the boxes to move apart horizontally, but when stacked vertically there was no space between them, even though there was bottom padding on each box.
Further investigation showed that the box-sizing property of the check boxes was set to border-box. After reading up, I found that the border-box box model calculates the width and height to include the padding and the border.
The checkboxes have a height of 1.5rem assigned.
My question is as follows. As is my understanding, padding shouldn't change the size of the element when using border-box. However this only seems to be true if definite dimensions are set as shown in the linked jsfiddle. Height is set, so the bottom padding isn't added on as an extra. But width isn't and right padding has an effect on the visible width of the divs.
Why is this the case? Surely padding should have no effect on the size of the element (unless set to something ridiculous, larger than the element itself), irrespective on whether I've defined a definite width or left it to be calculated?
JSFiddle: http://jsfiddle.net/Astridax/8cd48emn/
Please try and toggle the paddings using dev tools to see what I mean.
As is my understanding, padding shouldn't change the size of the element when using border-box.
This is where you're confused. Here's what the spec has to say on this subject: http://www.w3.org/TR/css3-ui/#box-sizing0
border-box
The specified width and height (and respective min/max
properties) on this element determine the border box of the element.
That is, any padding or border specified on the element is laid out
and drawn inside this specified width and height. The content width
and height are calculated by subtracting the border and padding widths
of the respective sides from the specified ‘width’ and ‘height’
properties. As the content width and height cannot be negative
([CSS21], section 10.2), this computation is floored at 0.
The actual effect of setting box-sizing to border-box is that specified widths will be said to include the border and the padding. The spec says nothing about unspecified widths, which are therefore treated as normal - as wide as they need to be to incorporate both the content and the padding and the border.
Edit:
What you're implying should happen is actually impossible to do, for the following reason. Imagine you have content in a div such that the auto width of the content alone would be 500px exactly. Then throw a 20px padding around that.
#myDiv {
padding: 20px;
width: auto;
}
No problem yet - you have a 540px wide div with the box-sizing at content-box by default.
Okay, so lets change the box-sizing to border-box.
#myDiv {
box-sizing: border-box;
padding: 20px;
width: auto;
}
What you're suggesting should happen is that the padding should now be ignored. So we have a div with 500px worth of content, we're going to now include the padding within that 500px instead of extending the width of the div. But wait - now the content box has shrunk to 460px to allow for the padding and the overall size of the box is 500px. But wait, we're not supposed to be accounting for the padding when calculating the width, so we'd better render the div at 460px right?
You see the problem? You could go on infinitely like this.
Looking for some assistance if its possible to do a fluid height image in CSS.
Ex) http://jsfiddle.net/VDB7A/20/
I want to have the box div at a set height, but dynamically size the container to show all the text at the bottom without going over the set box height. Basically this is for a fluid width site, where I want to cap the box height and auto adjust the image size to show all the text without going over the height.
Thanks!
Figured out my own answer:
I need to scale everything on width. So I need to put a min-width and max-width on the container. Then I need to put width:100% on the image. Height will always be auto.
http://jsfiddle.net/VDB7A/27/
I need to scale everything on width. So I need to put a min-width and max-width on the container. Then I need to put width:100% on the image. Height will always be auto.
http://jsfiddle.net/VDB7A/27/
Please reference the following example:
In it, an outer div 200px wide is meant to establish our page width. It contains an inner div 400px wide, but with left/right negative margins of -100px.
My intended end result is that the browser register total content width at 200px, not 400px, but horizontal scrollbars show up as soon as the window is resized to less than 400px. What is going on here?
Negative margins don't adjust the width of the div. A negative left margin will move the div to the left of it's position in the flow of the page, and a negative right margin will allow other elements to overlap the right hand side of the div by the amount of the margin.
You can hopefully see what I mean in this jsFiddle.
From your question it sounds like you need overflow: hidden to contain a large div within a smaller one without spilling out of its boundaries.
Gareth's answer is correct. Even with negative margin, the div is still part of the standard page flow and will not be ignored with respect to layout. Genuine page content cannot be ignored for scrolling purposes.
However, if you're doing this for an aesthetic, such as having a shadow down the sides of the page that extends beyond your max width, this can be achieved with a background - this question should help.
as Gareth already mentioned, margins do not affect the box size. The solution is rather simple. The outer container needs to be 400px, this is what is going to trigger the horizontal scroll bars. The inner container needs to be 200px with 100px left and right margins. When you resize the window, the scroll bars appear as soon as you have gotten smaller than the outer container.
http://jsfiddle.net/58VFB/
Try adding this to your CSS...
body {
overflow-y: scroll;
overflow: -moz-scrollbars-vertical;
}