float a <p> and <ul> element on same line

Question

I already read all the questions and answers that look like my problem, but i still can't seem to figure out why my piece of code is not working.

I would really be grateful if someone could help me out.

What I'm trying to do is to get a ul element floating after a p element. See the code snippet aat: http://jsfiddle.net/Y6D6p/66/

html:

<div class="gf-sosumi">
  <p>Copyright © 2014 Van Straten Fotografie. All rights reserved.</p>
  <ul class="piped">
    <li><a href="#">Terms of Use</a></li>
    <li><a href="#">Privacy Policy</a></li>
  </ul>
 </div>

css:

#globalfooter .gf-sosumi p { float: left;}
#globalfooter ul.piped a { float:left; padding: 0 0 0 1.5em; margin-left: 1.5em; border-left: 1px solid #212121; }

.piped li { float: left;}
.piped a { float: left; border-left: 1px solid #212121; padding: 0 0 0 0.75em; margin-left: 0.75em; }

it results in the list on the next line in stead of after the p element. Any help would be really appreciated.

Thanks.

Answer 1

Add this css:

.gf-sosumi p, .piped {display: inline-block;}

example fiddle http://jsfiddle.net/Y6D6p/69/ (make sure you open the results window wide enough)

Answer 2

Don't use float for trivial tasks like just forcing stuff next to eachother, easier to use display:inline-block for that. Just applying that to the p, ul and li elements will fix it.

Sample updated simplified fiddle.