button jumps to a new line (css)

Question

My application should look good on small screens. When it is normal size, everything looks good. But when the screen is too small my buttons starting to mess up.

Red square represents an image, yellow represents some text and blue represents buttons.

Normally, the top version is displayed (the correct one) When the screen is small, the second situation happens, when the bottom button jump to a new line.

Ideally, both buttons should stay one above the other. This is my css code:

{
    background-color: #6b89ac;
    border: 1px solid #89a9d0;
    border-bottom-color: #1d4474;
    color: white;
    font-weight: bold;
    text-decoration: none;
    padding: 2px 5px 2px 5px;
    margin-bottom: 3px;
    text-align: center;
    display: inline-block;
    width: 100px;
}

Answer 1

In the 1st situation, the 2nd blue box being held to the right only because the red box is tall enough to prevent it from clearing.

To ensure the blue boxes stay to the right right, float them right {float:right} You should then wrap each set in a div so that the 2nd red box doesn't run up into the middle of the 1st group. And you'd probably need to apply a cleafix solution to that div to ensure its height grows approprirately with the addition of floats.

clearfix references:
1. What methods of ‘clearfix’ can I use?
2. The New Clearfix Method

(I prefer #2)

Answer 2

You can give the body a fixed width. Then, your layout doesn't change when the window width is reduced. You can use the overflow-x property to control the scrollbar behaviour

Answer 3

It happens on small screens because the button is being pushed far enough down to slide under the picture. Try wrapping the text and buttons together in a div. The buttons would then be bound by the left edge of that new div.

Depending on your code that new div might also need overflow: hidden.