Why does overflow hidden affect height and how can I fix it in this example?


Tags: html,css,html5,css3

Problem :

Fiddle: https://jsfiddle.net/wa51kdh7/

Code:

HTML: Hello world

<span class="span2">
    Goodbye cruel world
</span>

CSS:

span {
    display: inline-block;
    margin: 0;
    padding: 0;
    line-height: 16px;
    font-size: 16px;
    height: 16px;
}

.span1 {
    background-color: lightblue;
}

.span2 {
    background-color: pink;
    overflow: hidden;
    width: 130px;
    text-overflow: ellipsis;
}

Here I am trying to create two spans next to each other, only one of them has overflow: hidden and the other shouldn't have overflow: hidden. For some reason the overflow: hidden affects the heights and they don't line up - even when I use an explicit height.

Any idea how to fix this?



Solution :

This can also be fixed by adding vertical-align: top to the span's CSS rule. The reason that both rules fix the problem is that they enforce the vertical alignment of the divs.

Adding a vertical-align rule will keep you from potentially having the elements that follow from needing to be cleared.


    CSS Howto..

    How to make a div take the remaining height without knowing the height?

    How to create CSS3 bounce effect with PURE CSS

    How to create a completely flexible piano keyboard with HTML and CSS

    How to freeze frame with css

    How to negate conjunction of two attributes in CSS selector

    How do I remove this unwanted space which seems to be background repeating HTML/CSS

    CSS: How to shrink first div in container instead of going outside of container (second container should be shown just after first) [closed]

    CSS - How to deactivate the :hover pseudo class in IE 6

    How to align a background image to bottom of table cells in css?

    How to style form elements unobtrusively with JavaScript and CSS?

    How to vertically align text to the right of some text using css? [closed]

    How to create triple div border in CSS

    How to position one element relative another using CSS/jQuery

    how to see background color of div when if move on image

    How to edit the element.style css?

    How to stop jitter of relatively placed items on scrolling with mouse?

    How to make a bullet of an image slider look different while is active?

    How to position text on image using position as absolute while container width being in percent

    How to change color icon in Materialize?

    how to colour user selected option using CSS in Firefox

    How to solve CSS -webkit-appearance issue

    How to make the content div scrollable without using javascript

    How to get my navbar to fluidly contain the largest element?

    How to make mobile menu transition “backwards”?

    how to improve this CSS layout which look like a table [closed]

    How to align slideshow element below header?

    How to apply custom CSS on Facebook comment box plugin

    How to dynamically pass variables from HTML to CSS [closed]

    How to resize two divs on the click of a link

    How to remove a html table particular column to make other datas visible(responsive) using media queries?