Question 235283 in Html Question posted in
Some basic documentation can be found here.

Html – Why is the Presence of a Floating Element overriding the Text Align?

https://jsfiddle.net/u0Ltgh3e/68/

.text {
  width: 50%;
  text-align: justify;
}

I’m programming a formatting application for a very specific use case and I’m trying to have two columns in a way shown in this Jsfiddle. I’m running into a strange issue where the text align of my non-floating element is removed. The fact that the text align is getting overridden to align-left really is problematic for my usage because I’m also using this for Hebrew formatting (which goes right to left).

Is there anything I can do to fix this, maybe with JavaScript?

Tags:

2

Answers


  1. 0

    Can you share the rest of the CSS for the container and parent divs? It is likely the alignment is being overridden by another CSS rule.

    Login or Signup to reply.
  2. 0

    text-align works only on blocks. span is an inline

    * {
  border: 2px solid black;
}

.container {
  display: block;
}

.text {
  text-align: justify;
}

.right {
  float: right;
}

.half {
  width: 50%;
}
    <div class="container">
  <p class="text half right">
    you have to say how wide you want the "bbb..." block to be. xactly the same way as you'd wrap text around an image. The only difference is that text doesn't have
  </p>
  <p class="text left">
    a natural width, so you have to say how wide you want the "bbb..." block to be. text doesn't have This looks like a job for xactly the same way as you'd wrap text around an xactly the same way as you'd wrap text around an image. The only difference is
    that xactly the same way as you'd wrap text around an image. The only difference is that text doesn't have a natural width, so you have to say how wide you want the "bbb..." block to be. xactly the same way as you'd wrap text around an image. The
    only difference is that text doesn't have xactly the same way as you'd wrap text around an image. The only difference is that xactly the same way as you'd wrap text around an image. The only difference is that text doesn't have a natural width, so
    a natural width, so you have to say how wide you want the "bbb..." block to be.
  </p>

</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search