I know how to solve the problem, read the comment Please, I am looking why i have this problem in the first place, it just weird,
Please read the comment in the style code
Problem : I have this weird problem that, input border width is effecting the position of div, for example if i gave border width 5px to input; span will start after 5 px in relation to the parent, and if i give border width 10px to input span will start after 10px from it's parent div?? it kinda consuting, may be i am missing some thing obvious,
Here is the code snippet
.mainDiv {
display: flex;
}
input {
height: 100%;
/*To change understand the problem
just change the border width*/
border: 10px solid blue;
}
div div {
border: 2px solid black;
height: 30px;
/*i can solve it by displaying this
container as flex container as well*/
}
span {
border: 2px solid red;
/*First Edit Display them inline block
and also give height*/
display: inline-block;
height: 30px;
}
<form action="">
<div class="mainDiv">
<div>
<input type="text" required><span>not good</span>
</div>
</div>
</form>
There is a horizontal gap between the input and the span from whitespace. If you remove the whitepsace between the elements, that horizontal gap goes away.
<input type="text" required><span>not good</span>
There is a vertical gap between the top of the parent and the top of the span because the elements are aligned at the baseline of the text. Notice the bottom of the input, inside its border, and the bottom of the span line up.
Related
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?
Whenever I have a wrapper for a textarea, the textarea's height does not match the textarea's height. There's a few pixels of margin at the bottom. Why does this happen and how do I fix it?
E.g.:
<div>
<textarea></textarea>
</div>
The div will be a few pixels taller than the textarea.
Here's a fiddle:
http://jsfiddle.net/0dgjqp3b/
I don't want to explicitly set the height of the parent. The parent should wrap around the textarea even if the textarea resizes.
It's because the textarea element's display is inline-block by default. As a result, its vertical-align property is set to baseline (which is why it isn't aligned as you would expect). The reason there is reserved space at the bottom is for letters such as 'y' or 'j', which hang below adjacent letters/elements.
To resolve this, you can either change the vertical-align property value to something like top, or you could change the display of the textarea to block:
Updated Example
textarea {
vertical-align: top;
}
Updated Example
textarea {
display: block;
}
Add display:block; to the textarea
div {
border: 1px solid red;
}
textarea {
margin: 0;
padding: 0;
display: block;
}
<div>
<textarea></textarea>
</div>
Add display:block to the textarea element.
div {
border: 1px solid red;
}
textarea {
margin: 0;
padding: 0;
display: block;
}
<div>
<textarea></textarea>
</div>
Jsfiddle
My answer uses much of the code in the previous answers but with one new addition.
div{border:1px solid red;display:table;vertical-align:middle;}
textarea{margin:0;padding:0;vertical-align:middle;}
<div>
<textarea></textarea>
</div>
Let me know if there is anything else I can do.
on setting a padding to an empty textbox it behaves like this:
doing the same with an empty div it behaves like this:
both elements have the same padding, but the textbox is higher than the div.
i suppose that this behavior is, because the textbox assumes that there will be a content (see cursor), but the div does not have a content and so it is not as high as the textbox without content.
how can i achieve that the div will have the same height as the textbox, even without content?
You have to mention height manually to div for input it will tag some default height once it renders
input {
padding:10px
}
div {
border: 1px;
width: 100px;
padding: 10px;
height: 13px;
background-color :#e9e9e9;
}
Demo here
Set a height on it. Block level elements do not have a predefined height while some inline elements do, like an <input>.
div {
height: 16px;
}
div
{
height: 20px;
}
There is no height, if you give some height, then it will be as text-box.
Demo
Since div is a container you will have to specify height.
height:20px; depending on the height of the text box.
For a pure html/css solution:
#div {
height: 20px;
border: 1px solid black;
Width: 150px;
}
<div id="div" style="border: 1 px solid black"></div>
<br />
<input id="input" type="text" />
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
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>