<div style="background-color:red">
<div style="display:inline-block;background-color:green;height:20px;width:20px;"></div>
</div>
<div style="background-color:yellow">
<div style="display:inline-block;background-color:green;height:20px;width:20px;">hi</div>
</div>
When rendered in FF or Chrome the height of the red div is 26px, whereas the height of the yellow div is 20px. How can I make the red div render the same as the yellow div, but without it containing any text?
just a thought:
as long as there's no text in the div, it's treated like a inline-image (or something else), and so it's vertical-align is set to 'baseline'(or text-bottom or whatever) instead of 'bottom'.
the solution:
to correct that, set vertical-align: bottom; on your inner divs. there's absolutely no need to put a space or invisible element into it, like others mentioned (but that would be an (ugly) solution, too)
How about putting a zero-width space () in the "empty" node?
If you want to have a specific height, use
min-height: 1em;
Using a space of some sort is a different height in some circumstances.
It's lame, but you could add a to the empty div.
inline-block is a funny display type and without content because other properties like font-size and line-height can actually growing the element taller than 20px.
Related
I have a simple layout composed of boxes.
Fiddle of the code
I have <div> tags within <div> tags; I'm using them to 'define' blocks where I can later print out inputs.
<div class=display-window>
<div id=pieces>
</div>
<div id=vline></div>
<div id=message>
<p>Nothing special is going on</p>
</div>
</div>
When I take the <p> element out, the display is fine. But when it's there, the box slides down, making it way off. This is true for both #pieces and #message, here. It seems that the box slides until the paragraph is against its top. I want the box to stay there.
Shouldn't child elements leave their parents undisturbed if they can?! This feels very inflexible!
Note: I get widely different results between codecademy.com and fiddle.net, so it's difficult for me to tell what is going on exactly. Margins and padding solve the problem, but this is, again, inflexible: I want to remove the tags during execution.
This has to do with your inline-block style elements. By default, all inline-block elements have a vertical-align set to baseline, which in your case is the bottom [line-height] (probably 16px) of your vertical line (div#vline) in the middle of your div.
Set the v-align to top on the p element's container and it works great:
#message
{
vertical-align: top;
}
JSFiddle
Here is a test-case for my problem:
http://game-point.net/misc/testParaPadding/
I want the progressBarGreen.png image to be inside the DIV, and the DIV is exactly the right height (15px) to hold it, but there are a couple of pixels padding at the top of the DIV. Why? The browser seems to be sizing the content as if it contained text because the padding changes if I remove the font-family styling for the body, but there is no text in the DIV.
Interestingly this problem doesn't happen in Firefox's quirks mode.
jsFiddle Example
You need line-height:15px on the div holding the image
edit: Explanation for this behaviour line-height affecting even no-text blocks
Your image is the right size, but images are inline elements by default, and will be affected by the page's line-height, font-size, and other properties of inline elements.
If you add a line to your image's style reading display: block;, it will become a block-level element, and not be affected by any of those properties.
The initial value for vertical-align is always "baseline".
You can fix that by adding a vertical-align:top to your image ;)
Use
position:absolute;
To get the image on the other DIV exactly inside it.
Check this fiddle: http://jsfiddle.net/sRhXc/2/
I want to to get the following result:
________________Title of page
So let's say the html markup is <h1>Title of page</h1> and h1 is set to width:100%and text-align:right, I want it only be underlined on the left side of the title.
Any clue how to accomplish that? I have tried to wrap the title in a <div>, give that a background of white and shift it a bit down, so it overlaps the bottom of the h1-box, however, I'm not sue whether this works 100% cross-browser.
alternative solution:
<div style="width:100%;float:left;border-bottom:1px solid">
<h1 style="float:right;background-color:white;padding:1px;position:relative;top:1px">Hola</h1>
</div>
http://jsfiddle.net/VMCax/1/
You can try this as long as the line is not crucial to display content as it has support on IE8+.
h1:before{content:"________________"}
jsfiddle here
Looks like what you are trying to do would be better achieved with a wrapper container and a float inside. Make the inner div (or floated h1) have a white background. Make the outer div have a repeated (repeat-y) background that is the same spacing as the line-height of the text div.
Make sure the wrapper div respects the floated div (either overflow:hidden or with a clear div at the end of the float.
This will give you the effect you are looking for and should work with multi-line titles as well.
I'd go with CSS generated content, with non-breaking spaces and underline : http://jsfiddle.net/JMVUa/1/
h1:before{
content:"\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0";
text-decoration: underline;
}
I have this:
http://jsfiddle.net/UHrLH/1/
I set the height on the box element to auto, but min-height is 200px;
Now if i try to make more content in the first box, the height expands but it creates a big white space under it. I do not want that, i want to have the box under eachother like you can see above, where the height on all boxes is 200px
See the issue here:
http://jsfiddle.net/UHrLH/2/
http://jsfiddle.net/chricholson/UHrLH/10/
This will give you boxes inline but unfortunately the pairs will not extend to match the height of it's partner. To do this you will need to use tables or a javscript overwrite to capture the height. Also, bear in mind display: inline-block will not work on divs in IE7 and below, it would work on a span though: http://www.quirksmode.org/css/display.html#t03
http://jsfiddle.net/UHrLH/11/
I have added an additional div if that is ok for you...
<div class="box_Container">
I have a div that is float: right and it is inside a parent div. There are p elements inside that same parent div also, and the text wraps around the float: right div properly.
However, if I set the p elements to have a border, or do a <hr />, the border does not stop where the text stops, but extends behind the float: right div.
Here is a beautiful mspaint depiction of the situation:
Note that the green part of the black horizontal line is behind the floating div.
How do I get the border or <hr /> or whatever to be only as wide as the text, and not go behind the div?
I know this problem was posted some time ago, but I had the same problem today and found another solution:
http://jsfiddle.net/MvX62/
I use border-bottom instead of the <hr /> tag and had to add an overflow: hidden;. Look at the fiddle, i think this is more useful then the accepted solution, because you can also add a margin to the horizontal line and there is the same gap, as the text has.
Also you don't need to define z values and don't need any hacks or workarounds.
I've had this problem before, and I wasn't sure if it was solvable.
In your case, however, you could wrap the green box with another element and swap margin with padding and set its background to #fff to cover the offending line.
Check out the fiddle...
http://jsfiddle.net/UnsungHero97/8BwGB/3/
What I did here was give the floated element a z-index CSS property, which will put it "above" the non floated element (which has a smaller valued z-index) and the <hr /> will not go above the floated element.
In regards to getting it as wide as the text, in my example it is as wide as the text, but I'm not sure if that holds across browsers (I'm on Chrome). Let me know if it doesn't.
I hope this helps.
Hristo
p.s. excellent mspaint skillz :)
You would have to set the width of the paragraphs to the width of the container minus the width of the floating element, or you could give them a margin on the same side of the float equal to the float's width.
Div cannot wrap around another div. Wrapping is text-only property. You can simulate wrapping by setting the margin-right for the master div to the width of the div you want it to wrap, but text wil not flow under the inset div.
Some values of the overflow property can cause this behavior. Specifically, overflow: visible which is often set by popular CSS resets/normalization.