I have converted my problem into a simple code. I wanted span class block with class in to be exactly wrapping up the div class. It is coming outside diagonally at right bottom out of div. Can somebody help. Idea is that in the larger problem I am trying to solve, want to be able to create border sometimes with div and sometimes with span. Can somebody help in how to make these div and span just on one another?
.checker {
width: 17px;
height: 17px;
border: 10px solid green;
display: inline-block;
}
.in {
width: 17px;
height: 17px;
border: 10px solid red;
display: inline-block;
}
<div class="checker" id="uniform-deleteradio_0"><span class="in"></span></div>
Update on 14/3. Thanks for all the answers. Some of the techniques would make the inner span come within external div. But, what I want is like both div and span to be wrapped one on top of another. Say, I give border to either div or span, it should look like single border and both div and span look like single element. That's the situation in my actual project and I cannot eliminate either of div or span. span has one image as background (checkbox) and outer div has a border.
I think the problem is that your inner span is exceeding the size of the surrounding div box because of the border. You could make your outer div bigger (+20px) to fit the inner box.
Remove the height and width from the outer div, so it is allowed to be big enough to fit the inner sized div. I also changed the display property of the inner div to block.
<!DOCTYPE html>
<html lang="en">
<style>
.checker { border: 10px solid green; display: inline-block; }
.in { width: 17px; height: 17px; border: 10px solid red; display: block; }
</style>
<div class="checker" id="uniform-deleteradio_0"><span class="in"></span></div>
</html>
You should put the height and width of .checker to 'auto'. Fixed width and height will of course put any child to outside the div if it will not fit
This worked for me finally.
margin-left: -10px
margin-right: -10px
Related
I have the following code:
<div style="width: 100px;
overflow: hidden;
border: 1px solid red;
background-color: #c0c0c0;
padding-right: 20px;
">
2222222222222222222222111111111111111111111111113333333333333333333</div>
(XHTML 1.0 transitional)
What happens is that the padding-right doesn't appear, it's occupied by the content, which means the overflow uses up the padding right space and only "cuts off" after the padding.
Is there any way to force the browser to overflow before the padding-right, which means my div will show with the padding right?
What I get is the first div in the following image, what i want is something like the 2nd div:
image
I have the same problem with the overflow:hidden; obeying all the padding rules, except for the right hand side. This solution works for browsers that support independent opacity.
I just changed my CSS from:
padding: 20px;
overflow: hidden;
to
padding: 20px 0 20px 20px;
border-right: solid 20px rgba(0, 0, 0, 0);
Having container divs works fine, but that effectively doubles the amount of divs on a page, which feels unnecessary.
Unfortunately, in your case this won't work so well, as you need a real border on the div.
Your best bet is to use a wrapping div and set the padding on that.
I had a similar problem that I solved by using clip instead of overflow. This allows you to specify the rectangular dimensions of the visible area of your div (W3C Recommendation). In this case, you should specify only the area within the padding to be visible.
This may not be a perfect solution for this exact case: as the div's border is outside the clipping area, that will become invisible too. I got around that by adding a wrapper div and setting the border on that, but since the inner div must be absolutely positioned for clip to apply, you would need to know and specify the height on the wrapper div.
<div style="border: 1px solid red;
height: 40px;">
<div style="position: absolute;
width: 100px;
background-color: #c0c0c0;
padding-right: 20px;
clip: rect(auto, 80px, auto, auto);">
2222222222222222222222111111111111111111111111113333333333333333333</div>
</div>
Wrap the div and apply padding to the parent
.c1 {
width: 200px;
border: 1px solid red;
background-color: #c0c0c0;
padding-right: 50px;
}
.c1 > .c1-inner {
overflow: hidden;
}
<div class="c1">
<div class="c1-inner">2222222222222222222222111111111111111111111111113333333333333333333
</div>
</div>
If you have a right-adjacent element to the one in question, put padding on its left. That way the content from the left element will flow up to but not past its margin, and the left padding on the right-adjacent element will create the desired separation. You can use this trick for a series of horizontal elements which may have content that needs to be cut off because it is too long.
I'm trying to decrease the distance between the text in the h1 element and the border to the right so it looks like a small vertical line which separates it from the following text.
This is what my current css looks like:
.test{
border-right: 2px solid black;
padding-right: 0px;
}
The right border still appears very far on the right although I thought through setting the padding to 0px at the right it should appear directly next to the text.
I guess this is a pretty dumb question, I am still a beginner!
Thanks in advance
h1 elements are display: block by default (with width: 100%), which means they stretch to the full width of their container.
If you want to have the element only be as wide as it needs to be, make it display: inline-block instead (and then use padding, as you've identified, to determine the distance between the end of the text and the right border):
.test{
border-right: 2px solid black;
padding-right: 0px;
display: inline-block;
}
<h1 class="test">This is a test</h1>
h1 elements are display:block by default, 100% width by default. Try changing width:300px or display:inline-block.
I'm trying to implement a colored underline by putting the selected text in a span element and then giving the span a colored bottom border, like
border:bottom: 1px solid red;
This works, but the line is too far under the word:
Here's the border around the entire span element:
Does anyone see a way to reduce the height of the span element so the bottom border is closer to the word?
Thanks
Inline elements don't have a height, so you can change the display property to something like inline-block, and then use the line-height property to move the border closer:
span {
border-bottom: 1px solid red;
display: inline-block;
line-height: 10px;
}
Does anyone see a way to <span>reduce</span> the height of the span element so the bottom border is closer to the word?
You can also use height.
span {
border-bottom: 1px solid red;
display: inline-block;
line-height: 20px;
}
Does anyone see a way to <span>reduce</span> the height of the span element so the bottom border is closer to the word?
How can I get the "content" <div> of these two columns to fill the container's entire height?
jsfiddle: http://jsfiddle.net/7m4f7/8/
This is a follow up to this question: Make children divs the height of tallest child.
Here is a similar question, but the solutions don't seem to work.
Make div (height) occupy parent remaining height
Instead of using the display:inline-block, I used floats.
In order to obtain the same height , I used the content div to push the item div through the padding/margin compensation.
The background color of the title and content are now independent. You can changed at will.
The automatic margin between the inline-block elements can be replaced with regular margins applied to the divs at will or if you prefer just take them away.
You get the following:
Fiddle here
markup did not change
Css as follows
.row {
border: 1px solid red;
overflow:hidden;
}
.item {
float:left;
margin-right:4px;
}
.title, .content {
border: 1px solid rgba(0,0,0,0.2);
}
.content {
padding-bottom:1000px;
margin-bottom:-1000px;
background: rgba(0,0,0,0.1);
}
.title {
background-color: rgba(0,0,0,0.2);
}
Not exactly what you asked for, but maybe this is sufficient. When you add vertical-align: top;, the top edges will align nicely
.item {
background: rgba(0,0,0,0.1);
display: inline-block;
vertical-align: top;
}
JSFiddle
I have a problem concerning CSS and HTML.
I'm trying to wrap a DIV around another element (an UL in this case) and having it wrap around it and at the same time keeping both centered. As an added bonus I can't set a specific width since the width of the content inside the wrapping DIV have to be dynamic (since this is basically a template).
I've tried floating, and that works as far as wrapping goes, but then the thing ends up either to the right or to the left.
I'm going a bit crazy over this, and google is no help!
Thanks in advance!
UPDATE:
Sorry about not including code or images. This is what I'm trying to do illustrated with images:
One state of the UL width
Another state of the width
The wrapping DIV can't stretch the full width of the container. It has to wrap around the UL.
The dark grey is the DIV around the UL. I need the DIV to wrap around the UL (which has a horizontal layout) no matter the width of the content, since like I said above, the content of the UL is going to by different from time to time. The text in the LIs are going to change.
I also need it to be centered. I've made it work with float left and float right, but I need it to be centered.
This is the code I'm currently using for the container DIV and the UL and LI elements:
#container{
height: 100px;
width: 500px;
font-size: 14px;
color: #grey;
display: table-cell;
vertical-align: middle;
}
#container ul{
text-transform: uppercase;
text-align: center;
font-weight: bold;
}
#container li{
background: url(checkmark.png) center left no-repeat;
display: inline;
padding-left: 20px;
margin-right: 5px;
}
#container li:last-child{
margin-right: 0;
}
UPDATED
I got it. Is it this you were looking for?? http://jsfiddle.net/vZNLJ/20/
#wrapper {
background: #ccc;
margin: 0 auto; /* to make the div center align to the browser */
padding: 20px;
width: 500px; /* set it to anything */
text-align: center;
}
#wrapper ul {
background: #aaa;
padding: 10px;
display: inline-block;
}
#wrapper ul li {
color: #fff;
display: inline-block;
margin: 0 20px 0 0;
}
#wrapper ul li:last-child {
color: #fff;
display: inline-block;
margin: 0;
}
<div id="wrapper">
<ul>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</div>
This is an old post, but what you can do now is:
<div style="display: flex; justify-content: center;">
<div style="display: inline-block;">
<input type="button" value="Example Button" />
</div>
</div>
The problem isn't wrapping the DIV around the content, but getting the content to state it's actual size, therefore pushing the DIV boundaries out. There are several things that need to be considered when tackling this issue. Not just from an existing UL or LI tag, but a DIV within a DIV.
I use custom tags to help describe layouts cleaner. Custom tags are DIV tags, thus their properties must be manipulated by CSS in order to get the proper behavior.
<layout-linear horizontal>
<control-label>Label 1</control-label>
<control-label>Label 2</control-label>
<control-label>Label 3</control-label>
<control-label>Label 4</control-label>
<control-label>Label 5</control-label>
</layout-linear>
This layout suggests that the contents .. the control-label(s) tags .. will be display in a horizontal row. To get the border for the layout-linear tag to wrap around the content of the control-label tags, there are several things to do:
layout-linear[horizontal]
{
display : block;
box-sizing: border-box;
border : 1px solid black;
padding : 1px 1px 1px 1px;
white-space: nowrap;
width : 100%;
clear : both;
text-align : center;
}
First, the box-sizing property must be set to border-box. This will force the linear-layout (DIV) tag to wrap around content. Padding, Border, Margin will insure that an empty DIV tag displays. Other tricks to make an empty DIV tag display are to use or :after { content:.; visibility: hidden; }.
If you don't want the control-label tags to wrap, adding white-space : nowrap.
I will discuss text-align when I discuss the float property of the control-label tag.
The next part requires the inner DIV tags (control-labels) to properly specify their box-sizing type and borders.
control-label
{
display : inline-block;
/* float : left; */
box-sizing: border-box;
border : 1px solid black;
margin : 5px 5px 5px 5px;
padding : 5px 5px 5px 5px;
}
Display : inline-block, causes the control-label tags to flow left to right. Display : Block, will cause the tags to stack up vertically.
Float is commented out specifically to draw your attention to the fact that float will cause the layout-linear tag shrink to its smallest box size, based on the margins, padding, and border.
To have the control-labels flow right to left, add text-align : right to the layout-linear tag. Or in this specific case, set text-align : center.
Again, box-sizing is used to tell the control-label (DIV) tag to wrap around it's content completely. Not just the text, but the edges of the box as drawn by the border, padding and margin settings.
This arrangement of CSS properties is what causes the outer and inner boxes to be rendered properly, or as expected.
Happy Coding.
You didn't supply code, but take a look at this fiddle I just setup, which might help:
http://jsfiddle.net/qXDJr/
Please let me know if I'm misunderstanding what you mean. Example code will always help for future reference.
This might help.
If you cant set the width you can just add align='center' in the div wrapping ul
<div align="center">
<ul>
<li>MenuItem</li>
<li>MenuItem</li>
<li>MenuItem</li>
</ul>
</div>