Floating divs with content directly below selected div, even if divs wrap

Question

Thanks in advance for any assistance.

I am trying to create a row of fixed height/width div's with borders (squares):

[ 1 ] [ 2 ] [ 3 ] [ 4 ] [ 5 ]

When one of those div's is clicked, another div, with content relating to the clicked div will appear below:

[ 1 ] [ 2 ] [ 3 ] [ 4 ] [ 5 ]
--^----------------------------------------
CONTENT #1
-------------------------------------------

or

[ 1 ] [ 2 ] [ 3 ] [ 4 ] [ 5 ]
--------^-----------------------------------
CONTENT #2
--------------------------------------------

I have all that working just fine, however I want to improve my code so that if viewing the page from a device with a smaller resolution, and the divs 1-5 wrap, the div with the corresponding content will sit just below the appropriate div:

[ 1 ] [ 2 ] [ 3 ] 
--------^-----------------------------------
CONTENT #2
--------------------------------------------
[ 4 ] [ 5 ]

Instead of...

[ 1 ] [ 2 ] [ 3 ]
        ^
[ 4 ] [ 5 ]
-------------------------------------------
CONTENT #2
--------------------------------------------

I'm searching for a solution that doesn't require clunky javascript's to predetermine screen resolutions etc.

I've been at this for a while Anyone have any thoughts or ideas for me?

Best Regards

Matt

Answer 1

You have to do it with css border-bottom property, so that wherever div's gets positioned there will be a border placed at their bottom. By using this logic, you can implement the way you mentioned by manipulating div width's with respect to browser width and making adjustments in css properties. I hoped you got an idea to initiate it.

Answer 2

Here are content containers that wrap with an additional content container appearing on hover: http://jsbin.com/vepayi/2/edit?html,css,output

Do you need functionality on click? What is the purpose of this UI?

Answer 3

Id advise not to follow the CSS only route, but just for fun, see fiddle :

HTML

<div class="box">
    <div class="num">
        <div class="num_in"><a href="#hell1">1</a>
        </div>
        <div id="hell1" class="hid">hello!</div>
    </div>
    <div class="num">
        <div class="num_in"><a href="#hell2">2</a>
        </div>
        <div id="hell2" class="hid">hello 2!</div>
    </div>
    <div class="num">
        <div class="num_in"><a href="#hell3">3</a>
        </div>
        <div id="hell3" class="hid">hello3!</div>
    </div>
    <div class="num">
        <div class="num_in"><a href="#hell4">4</a>
        </div>
        <div id="hell4" class="hid">hello 4!</div>
    </div>
    <div class="num">
        <div class="num_in"><a href="#hell5">5</a>
        </div>
        <div id="hell5" class="hid">hello 5!</div>
    </div>
</div>

CSS

.box {
    display:block;
    border:1px solid #f00;
}
.num {
    display:inline-block;
    width:200px;
    border:1px solid #000;
    margin:10px;
    vertical-align:top;
    text-align:center
}
.hid {
    display:none;
    transition: all 1.5s ease-in-out;
}
.hid:target {
    display:block;
}