pre, code, span - как правильно стилизовать и разметить?

Вставляю код в структуру

<pre><code><span>some css</span></code></pre>

Все работает как и описано в документации, но когда сами теги табулированы в файле и начинаются с 21 колонки, при отображении они также уезжают очень далеко, добавил white-space: pre-wrap; все стало на свои места, но когда в вставляемом коде идет больше одной строки и они должны быть табулированы по структуру, то все табы теряются и строки отображаются с одной линии.

Как правильно стилизовать эту структуру, чтобы

• код не уезжал на страничке
• по возможности сохранилась табуляция в html файле
• при многострочности табы код отображался как и задано в структуре

http://jsfiddle.net/falkone/npnccung/

При этом добавляется куча пустого пространства, понимаю что это из-за самой структуры в html, но ведь не вырезать код в первую колонку...!