jeudi 11 février 2016

Float property in css

I have two p tag and one (id=floating) is having css property {float: right}.

This affects the other p tag (id=toCenter) which have the style {text-align: center}.

ie. text alignment is only applicable to remaining area.

Even though this output is understandable, What should I do to have the 'toCenter' p tag centering along the whole width.

I tried with z-index, but no result till now.

HTML:

<body>
  <div>

      <p id='floating'>floating floating floating floating floating floating floating floating floating floating </p>

      <p id='toCenter'> ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>

  </div>
</body>

CSS:

#floating{
  background: red;  
  float: right;
}

#toCenter {
  text-align: center !important;
  background: yellow;
}

codepen : http://ift.tt/1XkFbeZ




Aucun commentaire:

Enregistrer un commentaire