Question

I have two divs which change their position when the x axis or y axis of the screen is higher or smaller than the other axis. You can test that in the JsFiddle example.

JSFIddle

My ButtonToolbar elements position gets messed up when the position of the two divs is changed. How to fix this positioning issue?

I’v tried using position position:relative but didn’t manage to get it working. Any ideas? Hope you understand my problem.

Answer 1

Instead of using position:relative try float:left on .dhFieldset when shown on top of a screen.

@media screen and (max-aspect-ratio: 1/1) { 
    .dhFieldset{
      color: white; 
      height: 35px;
      width:80px;
      margin-left:22px;
      float:left;
}

Also, if you do not want them to go one below other – you will need to set min-width on .dhButtonToolbar. Like it is done here
Or you can change a width of dhFieldset to percentage width.