Support » Fixing WordPress » format text on page

  • Resolved befree22


    I’m having trouble aligning the text on It’s a music site and there are 2 columns for music lyrics. I’m using <div> tags. The first 2 songs are correctly aligned. However, the lyrics for other songs listed below are not aligning in the table but instead are shifting to the left for each respective song. Could someone help me fix this. Here’s the pastebin code:

Viewing 13 replies - 1 through 13 (of 13 total)
  • The misalignment is because you have some of those divs floated right and some floated left — but not in a logical way. So check on that. You’d really be much better off keeping the CSS in the external stylesheet, not in the HTML code.

    And how do I create the css for this? In other words, what code do I use in the page and what code do I add to the css to fix this problem?

    I tried adding this in the page but the lyrics appeared as paragraphs instead of lines of text.

    WordPress themes generally have some built-in CSS, so you would generally just use those classes already in your theme to set the alignment. For example, this CSS code is in the theme:

    .alignright {
       float: right;

    So then in your div, you would put <div class="alignright"> which would float that div to the right. In your page, you would likely also have another custom class for the width so those divs fit side by side.

    But trying to explain extensive basic CSS and HTML is really beyond these forums. I can only suggest that you do some reading about how CSS and HTML work – there are many good tutorials, including videos out there that will be helpful. This is also a good site:

    Furthermore, it appears that you are using a commercial theme — which is not supported here, so you might also try asking the vendor for help.

    I am fixing the page because it’ll be a 2012 child theme (I love native WordPress) so I’ll be ditching the current theme in a few days.

    OK, would it be fine then if I add this code to the page…

    <div class="alignleft">INSERT LYRICS HERE</div>
    <div class="alignright">INSERT LYRICS HERE</div>

    so I’ll have 2 columns for lyrics.

    and in the css, add this:

    .alignright {
       float: right;
       width: 48%;

    Not quite because you really do not want to change the existing `.alignright’ — because it is used elsewhere in your site. That will completely mess up other elements. You would likely need to create a custom CSS — for example:

    .halfwidth {
       width: 48%;

    then add that class to the divs

    <div class="alignright halfwidth">

    So the divs would be…

    <div class="alignleft halfwidth">
    <div class="alignright halfwidth">


    FYI: The alignright w/ 48% css code works — all except 1 of the song lyrics are in 2 columns (see webpage). Maybe the div you just shared will fix the 1 song lyrics.

    Yup, this should do what you want.

    After switching to .halfwidth css, all song lyrics aligned in 2 columns except for 1 “Wanna Be Free”. View webpage.

    So I switched the <div class=”alignleft halfwidth”> and <div class=”alignright halfwidth”> div tags in some lyrics and Voila! It works perfectly.

    Thanks so much for your dedication to WordPress WPyogi.

    It works!

    Moderator Andrew Nevins


    Forum moderator

    Thanks WPyogi.


    FYI: The help WPyogi offered above was for a commercial theme but the current theme is permanently switched to a 2012 child theme on this site.

    I’m having the same issue with the 2 column layout on this 2012 child theme, namely, the lyrics aren’t appearing in 2 columns. I adjusted the font size but the lyrics still aren’t appearing in 2 columns (view page).

    Since I’m using a 2012 child theme, do I have to continue using halfwidth div? What css will work with the child theme to align the lyrics into 2 columns?

    Did you add the halfwidth class to your CSS anywhere? Does not look like it.

    OK, I just added the halfwidth class to the css and all of the lyrics are in 2 columns. 🙂

    Now, the current font is 10px and I changed it to 16px, so it’s quite readable now. Thanks again.

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘format text on page’ is closed to new replies.