Why is a div longer than several spans with the same content (only in Chrome)
I think this is due to some rounding and complex calculation. First, here is a better illustration of the problem using gradient to see the difference between both cases:
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
span:nth-child(odd) {
background:green;
}
span:nth-child(even) {
background:yellow;
}
.grad {
background:repeating-linear-gradient(to right,green 0,green 5ch,yellow 5ch,yellow 10ch);
}
body {
margin:0;
font-family:monospace;
}<div style='font-family:monospace;display:inline-block;' class="grad">
.....................................................................
</div>
Chrome doesn't render span in div properly
The problem is the default line-height. Browsers vary on how they define the default line-height ("normal") but many do make it a touch more than 1em (the default height of a span). Try explicitly setting the line-height to 1em:
<span style="background-color:cyan;line-height:1em;">Nested</span>
or
<div style="background-color:magenta;line-height:1em;">
If you want to use a line-height greater than 1em, you'll need to mark the span display:inline-block in order to allow its background color to fill the height of the line rather than just the 1em of the inline span:
<div style="background-color:magenta;line-height:2em;">
<span style="background-color:cyan;display:inline-block;">Nested</span>
</div>
Chrome and fixed width on a div (or other tags)
Chrome and Firefox are correct. Width is not a valid style property for inline elements. You have several options:
Inline Blocks
You can do this:
<span>fig</span>vitamin<br>
<span>apple</span>vitamin<br>
<span>coconut</span>vitamin
with:
span { display: inline-block; width: 80px; }
You'll notice I used <span> instead of <div>. There is a reason for this. <span>s are naturally display: inline and according to Quirksmode:
In IE 6 and 7 inline-block works
only on elements that have a natural
display: inline.
Firefox 2 and lower don't support this
value. You can use -moz-inline-box,
but be aware that it's not the same as
inline-block, and it may not work as
you expect in some situations.
Floats
You can float the left labels:
<div>fig</div>vitamin<br>
<div>apple</div>vitamin<br>
<div>coconut</div>vitamin
with:
div { float: left; clear: left; width: 80px; }
If the text after the <div> is sufficiently large it will wrap to the beginning of the line (not with the 80px buffer). You might want that or not.
Definition List
Using this markup:
<dl>
<dt>fig</dt><dd>vitamin</dd>
<dt>apple</dt><dd>vitamin</dd>
<dt>coconut</dt><dd>vitamin</dd>
</dl>
with:
dt { float: left; width: 80px; }
Tables
<table>
<tbody>
<tr>
<td class="left">fig</td>
<td>vitamin</td>
</tr>
<td>apple</td>
<td>vitamin</td>
</tr>
<td>coconut</td>
<td>vitamin</td>
</tr>
</tbody>
</table>
with:
table { border-collapse: collapse; }
td.left { width: 80px; }
Tables will be by far the most backward compatible solution (going back to IE5 or earlier) so they're still often used in situations where some might argue they aren't appropriate. The ideals of the so-called semantic Web are well-intentioned and worth adhering to where possible but you'll also often end up in situations where you're choosing between "semantic purity" and backwards compatibility so a certain amount of pragmatism needs to prevail.
That being said, unless you're not telling us something, you shouldn't need to go this path if you don't want to.
Lastly, always put a DOCTYPE declaration on your pages. It forces IE from quirks mode to standards compliant mode (both euphemisms). For example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
...
How do I keep two side-by-side div elements the same height?
Flexbox
With flexbox it's a single declaration:
.row {
display: flex; /* equal height of the children */
}
.col {
flex: 1; /* additionally, equal width */
padding: 1em;
border: solid;
}
<div class="row">
<div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
</div>
Chrome doesn't render div or span revisited
Just get rid of the two overflows in your div style. http://jsfiddle.net/zeuFT/1/
Related Topics
Different Colors in Placeholder
Multiple Webpages with Common Title and Navigation Bars
Removing Border Style Changes Page Layout
CSS Position - Top 100% Is Not Equal to Bottom 0
In What Conditions We Can Use CSS * Selector
100% Height Div Between Header and Footer
Coloring the Text Depending on Numeric Value Using CSS
Twitter Bootstrap Select Arrow Missing
Force Background Color Printing on Firefox
Horizontal Border Across Entire Row of CSS Grid
How to Change a CSS Property Dynamically in Angularjs
How to Change Side by Side Divs to Stack on Mobile
Strange Behaviour When Absolute Positioning an Input with Both Left and Right CSS Properties
Why Does Width Apply to a Button with Display Inline
Why Does Vertical-Align: Text-Top Make Element Go Down