I've been trying to make this work for two days now...
What I need is when div ex3 breaks, div ex2 breaks at the same time and makes ex3 break one step further. Meaning when ex3 breaks, ex2 should be placed in the middle of ex1 and ex3 like this:
from:
ex1ex2ex3
to:
ex1
ex2
ex3
...but the furthest I'm able to take it is to this:
ex1
ex2ex3
I hope I make myself clear enough...
http://jsfiddle.net/60Ludm5m/5/
HTML :
<div id="ultimatebreak">
<div id="ex1"></div>
<div id="breaker">
<div id="ex2"></div>
<div id ="ex3">
</div>
CSS:
#ex1, #ex2{
height:100px;
width:100px;
margin:0px 5px 5px 0px;
background:#000000;
float:left;
display:inline;
}
#ex3 {
height:100px;
width:100px;
margin:0px 5px 5px 0px;
background:#000000;
float:left;
display:inline;
margin-right:0;
}
#breaker {
border:2px solid grey;
display:inline-block;
min-width:20%;
}
#ultimatebreak {
border:2px solid grey;
width:50%;
display:inline-block;
}
This does what I think you were after:
#ex1, #ex2, #ex3{
height:100px;
width:100px;
margin:0px 5px 5px 0px;
background:#000000;
float:left;
display:inline;
}
#breaker {
max-width:210px;
display:inline-block;
}
Here is a JSFIDDLE showing it.
Edit: after your comment saying how you meant it to work I edited the code using CSS media queries:
@media(min-width:320px){
#ex1, #ex2, #ex3{
height:100px;
width:100px;
margin:0px 5px 5px 0px;
background:#000000;
float:left;
display:inline;
}
#wrap{
width:320px;
}
}
@media(min-width:110px) and (max-width:319px){
#ex1, #ex2, #ex3{
height:100px;
width:100px;
margin:0px 5px 5px 0px;
background:#000000;
}
#wrap{
width:110px;
}
}
Here is a JSFIDDLE of the CSS making use of the media queries.
I should add that you need to be aware that this doesn't work in older versions of IE.