If we have the following HTML
<div id="i">
StackOverflow
</div>
With the following CSS
*
{
margin: 0;
padding: 0;
}
#i
{
overflow: hidden;
}
#i a
{
padding: 20px;
background: red;
border: black 1px solid;
}
When I modify the CSS to toggle overflow: hidden on/off, (as shown in the picture below) we can see that the top and bottom padding and border is being hidden when overflow is set to hidden, Yet the left and right padding and border is allowed to flow. Why is this and how can I allow the full padding and border to flow.( I do not want to lose any of it but require overflow: hidden as its a fix to the common *float: * problem )
There are actually 2 problems here, it seems that also when we remove overflow: hidden we still lose the top padding at the browser ceiling, I also do not know why this occurs.
I believe that this is happening because the <a> element is an inline element. If you make the <a> an inline-block (i.e. display: inline-block), then the top padding should show.
I'm not too clear on what you mean by "how can I allow the full padding and border to flow", though.
Related
I have a site with bootstrap. If you see my jsFiddle example, you will see that the red bordered div has a -15px margin at left and right. This is because if the form-group and row I think. But all the other elements is in their place. Why is it?
CSS
.tokenizer {
border: 1px solid #f00;
border-radius: 4px;
width: 100%;
padding: 5px;
min-height: 100px;
color: #555
}
If I remove my .tokenizer the result will be the same, because col-xs-12 also have this width: 100%
Just remove the form-group class and it'll be ok. You don't need it around a text-area like this without a label.
Well it is not about the width its about the visibility you are giving a border to a div whose visibility is hidden. Oppose to that if your div's visibility is set to "none". Then it won't be the issue.
i.e.
display:none;
but the bootstrap class "hidden" is giving it to
display:hidden;
As the hidden elements are there , they are occupying the space they are just not showing it you whereas the visibility none option completely removes the element from the page.
https://jsfiddle.net/6xrwvnch/1/
I have two rows:
<div>
The first row
</div>
<div>
The <span class="boxed">second</span> row
</div>
The word "second" is in a yellow box with padding:
* { box-sizing: border-box; }
div { border: 1px solid black; }
.boxed {
background: yellow;
padding: 0.5em;
}
As you can see I am using the border-box model. But the yellow box does not. Or does it?
I expected the second row to be as high as the yellow box, but that did not happen. There is no float, no CSS position, but still the yellow box overflows the div. How can I make the second div row contain the yellow box inside of it?
There is a fiddle here: http://jsfiddle.net/lborgman/9xEgA/
Inline boxes are not affected by box-sizing since they are never affected by the width and height properties. When you add padding to inline boxes, all that does is cause their backgrounds to expand, pushing only their left and right edges away from surrounding content, but not their top and bottom edges (since the line height is not altered). That's why it overflows. See sections 10.6.1 and 10.8 of the spec for more details.
If you want to hide the overflow, use overflow: hidden:
div { border: 1px solid black; overflow: hidden; }
Otherwise, if you want to make the second row expand to contain the yellow box, you might be able to make the yellow box display: inline-block without any adverse side-effects:
.boxed {
display: inline-block;
background: yellow;
padding: 0.5em;
}
Try adding display: block to the span. Inline block elements sometimes alter the document flow in strange ways when you do things like add padding to them. See this updated fiddle
You can use display: inline-block property for your .boxed span.
.boxed {
background: yellow;
display: inline-block;
padding: 0.5em;
}
JSFiddle
In the bookmark_matrix in this fiddle
http://jsfiddle.net/sjD24/14/
I'm trying to hide content outside of the 500 px width
by setting
overflow:hidden
I'm not getting the desired effect as it wraps to the next line instead.
MDN Reference
The two examples I've seen show overflow working with vertical content, I'm not sure if this implies it does not work with horizontal content.
Please note that I do not want it to wrap. Perhaps that would have been a better title.
You have no height set, so the div's height expands as needed. There's no overflow.
You could do something like this:
#bookmark_matrix{
border: 1px dotted #222222;
padding: 5px;
width: 500px;
overflow: hidden;
height: 1em;
}
I have the following:
XHTML:
<div id="container">
// contents
</div>
CSS:
#container { margin: 0 auto; width: 940px; overflow: hidden; padding: 10px; border: 1px solid #CCCCCC; }
The div is centered on the page with margin: 0 auto and I use overflow: hidden to allow the DIV to automatically expand down to the height of its contents.
I have some content in the DIV which has a box-shadow on it. The problem is due to the overflow: hidden rule the shadow does not fully appear on the page. The only ways around this I have found:
Take out overflow: hidden - but then the container DIV doesn't expand down.
Use height / min-height on #container - however this wont work well with all pages on the site.
Use float: left - but then the DIV isn't centered on the page.
Anybody got any more suggestions for this?
You can use one of the many clearfix techniques. That will let you remove overflow:hidden and fix the cropped box-shadow.
Here's a recent article on the topic: http://css-tricks.com/snippets/css/clear-fix/
Pretty sure some margin on the div would solve it, but if you show some more code it's easier to check.
http://zergxost.com/test.html
As you can see, if there's not enough text, the bottom gray line goes way higher than it should. Can someone please explain why doesn't "article"'s hitbox include the "header"? And how ti fix it? Thanks.
You're missing a either a overflow: hidden or a clear: left declaration. You should always clear floating objects or declare overflow to be hidden (carefully!).
article {
overflow: hidden;
}
Or:
div#wrapper div.related {
width: 100%;
height: 960px;
border-top: 1px solid #808080;
margin-top: 20px;
clear: left;
}
Why/how overflow: hidden works
When you set a block-level element to have overflow: hidden, you're actually telling the browser change how it handles block elements. Functionally, you told the browser to contain normal elements (including floated ones). Things that will exceed the total dimensions of the box, usually by relative/absolute positioning, or images with huge widths, will get clipped to the wrapper's width. Drop down regions that cross over a container with overflow: hidden may cause them to get clipped as they enter as well.
Elements at the end of a overflow: hidden container will also have padding-bottom and margin-bottom applied.
Another answer: https://stackoverflow.com/a/3416217/24950
You need to clear div#wrapper div.related. Try adding the following to your CSS:
div#wrapper div.related {
clear: both;
}