curious1 curious1 - 3 months ago 12
CSS Question

margin left and 100% width push float text move beyond the browser edge

I have the following html:

<div class="footer">
<div class="text">
This text float to right
</div>
</div>


and the following CSS:

.footer {
position: fixed;
top: 0;
left:0;
background-color: pink;
width: 100%;
margin-left: 50px;
}
.text {
float: right;
}


Here is the jsfiddle example: https://jsfiddle.net/mddc/68tgqxpa/4/

The problem is that some of "This text float to right" is pushed beyond the browser edge. How can I use CSS to make the full text display to the browser edge?

The left-margin cannot be removed.

Thanks!

Answer

Use width of footer like this:

width: calc(100% - 50px);

and there you go! Let me know your feedback. Thanks!

.footer {
  position: fixed;
  top: 0;
  left: 0;
  background-color: pink;
  width: calc(100% - 50px);
  margin-left: 50px;
}
.text {
  float: right;
}
<div class="footer">
  <div class="text">
    This text float to right
  </div>
</div>