Заставить блочный div не переносится на другую строку

[freeneutron]

Всем привет. Есть html-код:

<div>	<span>1</span>	<span>		<span>2</span>		<span>			<span>				<div>3<br/>4</div>			</span>		</span>	</span></div>

, который дает результат:

, но результат должен быть таким:

Помогите пожалуйста расставить стили, что бы разметка приняла нужный вид. Вот на всякий случай заготовка на jsfiddle 

Edited August 18, 2014 by freeneutron

[Sergik+]

А стили где ? И зачем такой забор из span ?

[freeneutron]

А стили и надо дописать. Любое решение подойдет. Главное, разметку не трогать. Забор потому, что html генерируется из шаблонов. У каждого слоя свой смысл, поэтому трогать html нельзя.

Edited August 18, 2014 by freeneutron

[Sergik+]

Ну тогда 1,2,3 задаете float:left и width:33% a 4 float:right.

Дописал бы вам стили но уже 9 часов сидел за разметкой, ничо уже не соображаю.

Edited August 18, 2014 by Sergik+

[freeneutron]

Хватило даже 1,2,3 - float:left

http://jsfiddle.net/ym9om25s/2/

Спасибо!

Еще хотелось бы узнать, можно ли решить эту задачу не трогая стили блоков 1,2 ?

[ows.nightwolf]

Хватило даже 1,2,3 - float:left

http://jsfiddle.net/ym9om25s/2/

Спасибо!

Еще хотелось бы узнать, можно ли решить эту задачу не трогая стили блоков 1,2 ?

 

Для дива с 3, 4 задать:

display: inline-block;vertical-align: top;

Но это очень специфическое решение конкретно под ваш пример на картинке.