Photoshop Question posted in
The official user guide can be found here.

floating elements inside a paragraph – Photoshop

still a newbie so struggling with basics.
I have a list of songs and I want to put a symbol to the right after each name of the song. I thought I could use floats to do this. Here is what I want it to look like (photoshop)

enter image description here

This is what I am getting:

enter image description here

And this is my code:

html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Albums</title
        <meta name="description" content="Albums">
        <link rel="stylesheet" type="text/css" href="Styles.css" />
    </head>
    <body>
        <article>
            <div id="container">

                <div id="album1" class="albums">
                    <img src="../Images_Albums/album1.jpg">
                </div>

                    <p>01 Song 1 <span>c</span></p>

                    <p>03 Song 2 <span>c</span></p>

                    <p>01 Song 3 <span>c</span></p>

                    <p>03 Song 4 <span>c</span></p>

            </div>
        </article>
    </body>
</html>

css:

@font-face {font-family: QuaestorSans;
          src:  url("../../fonts/QuaestorSans-Rg.otf") format("opentype"),
                url("../../fonts/QuaestorSans.ttf") format("opentype");
}
@font-face {font-family: Dingbats;
          src:  url("../../fonts/RiansDingbats-One.ttf") format("opentype");
}


html, body {
    height: 100%;
    margin:0;
    padding:0;
}

body {
    background: url(../Images_Albums/Background1.jpg) no-repeat;
    background-size: 100%;
}

article {
    position: absolute;
    width: 32%;
    height: 100%;
    left: 50%;
    transform: translate(-50%, 0);
    background: url(../Images_Albums/Background2.jpg) no-repeat;
    background-size: 100%;
}

#container {
    margin-top: 9%;
    position: relative;
    width: 43.5%;
    left: 50%;
    transform: translate(-50%, 0);

}

img {   
    max-width: 100%;
    display: block;
    margin-bottom: 4%;
}

p {
    color: white;
    font-family: QuaestorSans;
    float: left;
    margin-left: 2%;
    font-size: .8em;
    clear: left;
    line-height: 1;
}

span {
    color: #90eaf7;
    font-family: Dingbats;
    float: right;
    margin-right: 2%;
    line-height: 1;
}

Have I not understood how floats work? Any suggestions appreciated. Thanks.

Tags:

2

Answers


  1. 0

    You’re close! Right-floated elements need to be higher up than non-floated content to appear on the same line and not below them. So change:

    <p>01 Song 1 <span>c</span></p>

    to:

    <p><span>c</span>01 Song 1</p>

    Login or Signup to reply.
  2. 0

    If you set a width on the span (just use 100% for this case) it will work as you want. 

    p {
  ...
  width: 100%; /* This is the change you need */
  ...
}

    html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  background: lightblue;
  background-size: 100%;
}
article {
  position: absolute;
  width: 32%;
  height: 100%;
  left: 50%;
  transform: translate(-50%, 0);
  background: url(../Images_Albums/Background2.jpg) no-repeat;
  background-size: 100%;
}

#container {
  margin-top: 9%;
  position: relative;
  width: 43.5%;
  left: 50%;
  transform: translate(-50%, 0);
}

p {
  color: black;
  font-family: QuaestorSans;
  float: left;
  margin-left: 2%;
  font-size: .8em;
  clear: left;
  line-height: 1;
  width: 100%; /* This is the change you need */
}
span {
  color: purple;
  font-family: Dingbats;
  float: right;
  margin-right: 2%;
  line-height: 1;
}
    <article>
  <div id="container">
    <p>01 Song 1 <span>c</span></p>

    <p>03 Song 2 <span>c</span></p>

    <p>01 Song 3 <span>c</span></p>

    <p>03 Song 4 <span>c</span></p>

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

Back To Top
Search