0

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.

Ruben van Straten
  • 5
  • 3

2 Answers2

1

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.

Niels Keurentjes
  • 41,402
  • 9
  • 98
  • 136
  • Thank you very much, this is exaclty what i needed. I'm going to read some more information about the display: css that's one i never used before. probably this will save me a lot of troubles on other places also. – Ruben van Straten Jan 04 '14 at 21:22
0

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)

agconti
  • 17,780
  • 15
  • 80
  • 114
  • Thanks agconti, this works even better than the previous answer. Since I could not simply extract the p ul and li from the other classes like Niels Keurentjes did. – Ruben van Straten Jan 04 '14 at 21:32
  • no problem,happy to help! @NielsKeurentjes was right about avoiding floats though! Watch out for those in the future. – agconti Jan 04 '14 at 21:36