Float: left and float: right at lower resolutions

Question

Float: left and float: right at lower resolutions

Navigation

#1 by (1 votes)

1

I have component 1 in float:left and component 2 in float:rigth , but the problem occurs when in minor resolution component 2 is below component 1 facing right side and component 1 facing pro left side.

My goal is that in minor resolutions, component 2 is aligned with the other one on the left side.

Clarifying better the component is below the other, in smaller resolutions one turned to the left side the other to the right side.

Also remember that I can not give float:left pros 2, if it will not get 1 below the other in higher resolution.

css

asked by anonymous 30.11.2014 / 18:46

1 answer

Convert PHP time Conflict between Spring MVC and PrimeFaces

score 1 · Accepted Answer

This question is due to the fact that the sum of the size of the two elements is too large to fit the width of the screen, so there is a gap in space. Since your problem is in the view on a mobile screen, I suggest you use media queries for perfect your system for display on the mobile screen.

body {
  margin: 0;
}

.left {
  float: left;
  background-color: green;
}

.right {
  float: right;
  background-color: red;
}

@media only screen and (max-width: 480px) {
  .right,
  .left {
    display: block;
    float: none;
  }
}

<div>
  <div class="left">
    Left is the left choice :D
  </div>
  <div class="right">
    Right is the right choice :3
  </div>
</div>