How to achive certain overlapping layout when there is not enough space in parent container?


Tags: html,css,css3

Problem :

I have <div class="parent" style="position: relative; width: 100%; height: 25vh;">...</div> that contains some amount of <div class="child"></div> elements (the number of them vary between sub-pages). As you see the size of .parent is known but not fixed. The .child size is fixed to e.g. 100px x 170px.

When there is enough space for all children in .parent, I want to place them one next to another, row by row (it's easy with e.g. float: left;): enter image description here

But when there are too many children for .parent, I want the excessive elements to be put "above" others, with small offset (so we can see that there's something below them - in a bit similar way to a Patience card game):

enter image description here

Note the order and that those excessive elements don't have to be on any "layer"/z-index, they should just overlap the divs that are before them.

Also, there is none fixed number of cards per row, as the .parent width is 100% of client width.

How can I achieve such behavior with CSS, without JavaScript (I know I could just compute absolute x/y based on child's index in JavaScript)?



Solution :

I believe I found a pure CSS solution that might work for you. From what I understand, you the Parent Div container and a random number of child divs that represent cards.

Disclaimer: I used pixels for this to show proof of concept, but the same effect can be done by using all percents if you work out the math.

Basic HTML Layout

// I am using the <!-- comments --> to remove whitespace between divs
// This is important because we don't want to being floating elements
// So each pixel is going to count
<div class="parent">
     <div class="child">card 1</div><!--
  --><div class="child">card 2</div><!--
  --><div class="child">card 3</div><!--
  --><div class="child">card 4</div><!--
  --><div class="child">card 5</div><!--
  --><div class="child">card 6</div>
</div>

For demonstration purposes, I made the cards a nice 100px by 150px. This just helps visual the math in my opinion. Here is the basic CSS we need to layout the field.

CSS

// normalize div elements
*{ box-sizing: border-box; margin: 0; padding: 0; }

.parent{
  position: relative;
  width: 480px; //4 cards wide with 10px of margin on each side (4*100)+(4*20)
  background: blue;
  height: 340px;
  overflow:hidden;
  margin: 0px auto;
}
.child{
  position: relative;
  width: 100px;
  height: 150px;
  border:1px solid #000;
  background: #333;
  color: white;
  margin: 10px;
  display: inline-block;
}

Now that the grid is setup, we just need to move the third and forth row up.

One of the great things about CSS is you can apply styles to elements that may of may not exist on the page. Using the nth-child selector will help us target these unknown elements.

MOAR CSS

.child:nth-child(n+9){
  // move cards from their origin up 330px and left 5px
  transform: translateY(-330px) translateX(-5px);
}

The only thing you need is to create enough rules to match the multiple outcomes you may have.

Example: I need to support a possibility of 18 cards. Just add another rule!

.child:nth-child(n+17){
  // all we have to do is double the increments
  transform: translateY(-660px) translateX(-10px);
}

Hope that helps.

Working JSFiddle


    CSS Howto..

    How do I (by default) style different types of labels differently?

    How to move a CSS class below another? [closed]

    How to add footer to the bottom of the page

    CSS: how to vertically and horizontally align an image?

    How make input element take up available space next to a fixed width element?

    How to add image at right bottom div using css

    How to make rounded tabs with css? [closed]

    How to prevent the background image from getting blurry

    Canvas distorts drawing. How do I get the scale factor between the set size and the styled size?

    CSS how to use pseudo-class :not with :nth-child

    How to version files in the section?

    How to crop a rectangular image into a square using CSS?

    How to over ride the transparency aspect in CSS

    How to override the CSS !important property when the original file loads after the customized css file

    How to create a form for a petition? [closed]

    How hide border on embedded swf

    How can we cache inline SVG in Browsers?

    How to “crop” a rectangular image into a square with CSS?

    How to make rounded corner cut-out using CSS?

    How to do “display = block” using jquery for particular element

    How To Use CSS To Style The Output Of JavaScript

    How to inline the contents of an entire stylesheet with Wordpress?

    how to center a box using blueprint css framework

    How to override CSS Background that already has !important?

    How can i increase the round corner button width dynamically depends on the text size in CSS?

    How to style HTML5 tag

    Any ideas on how I could implement a grid-view in CSS? - CSS

    How to reference css in actionlink?

    How can i add a line-break on a costume tooltip?

    How to make background color extend all the way to bottom of page / content?