Reposition div left of another div rather than below

Question

I am attempting to tile a webpage with div elements of various sizes. However, I am running into an issue with once x number of div elements have filled the width of the screen the following div is placed below the previous 'row', rather than being floated to fit into space between elements in the previous 'row'. The code below better demonstrates what I mean; I'd like the 'game' div to be floated to fit into the space above where it is currently positioned.

h1 {
 color: white;
}

.center {
 display: flex;
 justify-content: center;
 align-items: center; 
 text-align: center;
}

.container {
 display: inline-block;
}

.default {
 margin: 1em;
 float: left;
}

/* For hover text */
.hover_img {
 width: 100%;
 height: 100%;
 position: relative;
 float: left;
}

.hover_img h4 {
 color: white;
}

.hover_img:hover img {
 opacity: .2;
}

.hover_img:hover .center_text {
 display: block;
}

.center_text {
 position: absolute;
 top: 50%;
 left: 0;
 display: none;
 font-weight: bold;
 text-align: center;
}

img {
 margin: 0;
}

.rectangle-tile-horizontal {
 height: 15em;
 width: 35em;
}

.red {
 background-color: rgba(255, 63, 63, 0.8);
}

#game, #game img {
 width: 30em;
 height: 30em;
}

#app, #app img {
 width: 40em;
 height: 35em;
}

  <div class="container">
   <div class="rectangle-tile-horizontal red center default">
    <h1><b>Projects</b></h1>
   </div>
   
   <div class="rectangle-tile-horizontal hover_img default" id="app">
    <img src="http://cohenwoodworking.com/wp-content/uploads/2016/09/image-placeholder-500x500.jpg">
    <div class="center_text"><h4><a href="http://stackoverflow.com" target="_blank">Web App</a></h4></div>
   </div>
   
   <div class="hover_img default" id="game">
    <img src="http://cohenwoodworking.com/wp-content/uploads/2016/09/image-placeholder-500x500.jpg">
    <div class="center_text"><h4><a href="http://stackoverflow.com" target="_blank">Breakout</a></h4> </div>
</div>

Can you please modify your example to demonstrate the problem you are currently having a little clearer? At what width of `.container` does it go wrong? — Oliver Baumann, Oct 24 '17 at 17:10
@OliverBaumann, from what I've tested so far at 966px width it shows the issue, but I think it never display correctly. If you expand the snippet and run it (or run in full screen), it should show what is happening; I found that just running the snippet was not enough to see it as all the elements end up stacked — nedrathefr, Oct 24 '17 at 17:16

score 1 · Answer 1 · answered Oct 24 '17 at 17:29

I'm afraid what you want to do is actually re-order your divs to create a space-filling layout. To the best of my knowledge, using only CSS for this is difficult, if not outright impossible.

I suggest you take a look at this SO post, or perhaps even the Bulma framework is what you want.

If, however, you move away from re-ordering the containers automagically and instead look towards a solution that elastically adapts the width of each container to fill the available space while maintaining its "order" (first, second, third), I am sure CSS will be a viable solution. If you require assistance, please use the search or ask anew.

score 0 · Answer 2 · answered Oct 24 '17 at 16:43

0

Create a style for your div class or id like

.className    
{display:inline;}

and use it in your each div Hope this will help you

An example of this http://jsfiddle.net/JDERf/

answered Oct 24 '17 at 16:43

Anamica Bisht

199
4

Reposition div left of another div rather than below

2 Answers2