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 implement this to my index.html?

    how to get rid of firefox image border

    How to center vertical inside header?

    How to do make CSS Toggle like this? [closed]

    how to include css and js files to php template?

    How to set the color to the user's link color in CSS?

    How to convert html & css to an image?

    How to add left margin and wrap long lines in code tag

    how to remove selected option background color in IE browser through css?

    how to get the value of css style using jquery

    how to bench a css pseudo-elements

    How to create dynamic CSS based on user input

    How to align
  • to the top when higher items are hidden via CSS
  • how do you modify the actual css of a class rather than add a style to each element of that class? [duplicate]

    How to change text color of a css class?

    How do I make text-transform:uppercase work properly with Greek?

    How to make css for navbar (Jquery Mobile) bottom up submenu automatic?

    How to generate CSS with loop in less

    how to place image on image?

    How to make an element with fixed position relative to its parent, not the whole screen?

    How to prevent long text from flowing out of a container

    How to align social like buttons next to copyright text inside footer?

    How to return WebElement having particular CSS property using JavascriptExecutor?

    Using CSS, how do I change the font color of parent
  • tag if child
  • tag is hovered over
  • background-image: url(“images/plaid.jpg”) no-repeat; wont show up

    How to use base css file using twig

    How do i make li active in angularJS?

    How to show CSS transitions only on hover?

    How to add a CSS specifc for Google Chrome? [duplicate]

    CSS - How to make footer stay at the bottom of the page?