How to make overflow blocks working well ()


Tags: css,overflow,hidden

Problem :

Here is 8 floating blocks with equal content with some problems:

  • if I use padding:10px for sideblock .inner to create "border" it does not work good (padding-bottom it's look like disapeared)
  • if I put a cursor on block - it can't be appeared at the top, and do not move othes block

How makes block working well? HTML:

<div class="sideblock"><div class="style-menu"><div class="inner">
Everything around you that you call life was made up by people that were no smarter than you, and you can change it, you can influence it, you can build your own things that other people can use.</div></div></div>

CSS:

.sideblock {
    width: 220px;
    height: 80px;
    overflow: hidden;
    margin: 10px;
    float: left;    
}

.sideblock .inner {
    background: #ffffff;
    padding: 10px;}

.sideblock .style-menu {
    padding: 3px;
    background: #157ba1;
    background: linear-gradient(to right,  #157ba1 0%,#5fa31c 100%);}

.sideblock:hover {
    box-shadow:  0px 0px 5px #000;
    overflow: visible;
    height: auto;}

Here is my code - http://jsfiddle.net/2HqZV/1/

How it would be

Thx for support



Solution :

Well i assume you want the have the same look as when the div is hovered but then smaller?
You shouldn't have to use any overflow on the div it self atfirst, it should response to your given height.

When you inspect your element you can easially see the heights of your elements. You'll see that your .style-menu div hasn't the same height as .sideblock, to fix that you can add a inherit height to your style-menu:

.sideblock .style-menu {
     height: inherit;
    padding: 3px;
    background: #157ba1;
    background: linear-gradient(to right,  #157ba1 0%,#5fa31c 100%);
}

Now when you look further you see that your padding at the .inner div element expends the actual given height. What you want is the padding to be inline. You can easially do this with box-sizing. And finally you can 'cut' the text by adding a overflow:

.sideblock .inner {
    background: #ffffff;
    padding: 10px;
    height: inherit;
    box-sizing: border-box;
    overflow: hidden;
}

jsFiddle

I hope this is what you meant.

btw, i find your way of adding a border very unique ^^


Update

So to let every element that expends ignore every other element, you should take it out of the document flow. You can do this with position: absolute;. However what absolute position does is indeed ignoring all the other elements, but you want to have the same position. Because the element has no offset positioning (top, right, bottom, left) it will be placed at the left corner of your screen(acts like it is the only element in the DOM).
To keep the elements position we are not changing the .sideblock but the content of that; .style-menu:

.sideblock:hover .style-menu
{
    box-shadow:  0px 0px 5px #000;
    position: absolute;
}

Because this element goes on top of the other, you want to add the shadow here.

Now the .sideblock element has no content because the content has become absolute and so out of the document flow. To fix this you can give this element a min-height:

.sideblock:hover 
{
    min-height: 80px;
    height: auto;
}

jsFiddle


    CSS Howto..

    How to use ExtJS stripeRows with RowExpander plugin in IE8

    I want all columns() in a
    have the equal length, how to achieve this?

    How to use a variable for a path with Stylus?

    How do i create a responsive page with fixed positioned header and side nav using only html css?

    How to parse and extract CSS selectors as strings?

    How to make a dynamic-height DIV [duplicate]

    How to write syntax in internal css to external css?

    How to use Google Libraries API (jQuery) with Google App Engine?

    How to make HTML pages print at a consistent size from Chrome?

    How to put text over img on hover - width and height are variable

    How to toggle ng-class

    how to override left:0 using CSS or Jquery?

    How to display a 100% width stripe in a CSS design using a fixed-grid blueprint?

    How to set footer responsive?

    CSS How to embed several Font-Weights at once

    how to select a sibling element when hovering in CSS?

    How to set the style of the message in an SWT Text field?

    SMACSS and BEM: How to position Module inside of a Module?

    How to float elements in rows.

    Polymer 1.0 how can I style a paper-input:disabled?

    How can I have floated list items display their bullet in IE7?

    How to align text under image using HTML/CSS?

    How is the “greater than” or “>” character used in CSS?

    How to use CSS to style 4 blocks of Info in the homepage?

    How to make a site have a built in user-friendly editor?

    How can i dynamically change title of input type file?

    how do you change the color of nav bar

    How to exclude an Element (via ID) in CSS

    How to over-ride img-width from bootstrap? Set css rule to null?

    How to stop user agent stylesheets from overriding my css