Question

I have a structure like this. The problem I am facing is next:
When the x axis of the screen is smaller than the y axis the button toolbar(black) jumps to the top of the screen. And if the x axis is even smaller my fieldsets expand vertically jumping out of the botton toolbar. How to fix this and make fieldsets maintain their position?
I tried using overflow but didn’t make it work.

Answer 1

Do not use float:left

Set the .dhFieldset elements to be display:inline-block; and then set their container .dhButtonToolbar to be white-space:nowrap;

@media screen and (max-aspect-ratio: 1/1) { 
    .dhFieldset{
        display:inline-block; /*Added this line and remove the float:left*/
        height:37px;
        width:auto;
   }
}

@media screen and (max-aspect-ratio: 1/1) { 
    .dhButtonToolbar {
        height: 60px;
        left:5px;
        width:100%;
        right: 5px; 
        white-space:nowrap; /*added this line*/
    }
}

Demo at http://jsfiddle.net/gaby/Ueaa9/4/