Float:left and float:right in smaller resolutions

Asked

Viewed 94 times

1

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

My goal is that in smaller resolutions the component 2 be aligned with the other on the left side.

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

Also remembering that I can’t give float:left pros 2, if it won’t get 1 below the other in higher resolution.

css

  • This is because one component overwrites the other. Wouldn’t you call for this overlay? These components have what? Text? Images?

  • Component 1 is registration the other is social login

  • It is incompatible with the cell phone one to the left side another to the right side

  • 1

    It would be better for one button to be below the other, just adjusting in the CSS so that they assume the width of the screen. As I said earlier, there is the breaking of space so there is no overlapping of elements.

  • 1

    You can use the @media to adjust this.

  • What is the margin and the padding calculated of these elements? Are divs? To see this use firebug or click F12 in the browser and see what are the calculated values, not the arrows.

  • @media? not only familarized

  • the problem is not in the margin and padding, the problem is that in mobile resolution, one component is below the other one pro left side and the other pro right side, in smaller resolutions not even to notice

Show 3 more comments

1 answer

1


This question is due to the fact that the sum of the size of the two elements is too big to fit in the width of the screen, and so there is this space break. Since your problem is on display on a mobile screen, I suggest you use media queries to improve your system in relation to display on the screen of mobile phones.

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>

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.