Проблема с float

[Watchman]

есть трехколоночный макет, вот часть кода, с которым возникла проблема - блоки должны ити горизонтально, но почему-то сползли и расположены вертикально:

<div id="main">
	<div style="float: left;">
		<div style="height: 48px; width: 209px; background-image: url('{THEME}/images/box_header.jpg');"></div>
		<div style="height: 200px; width: 183px; margin-left: 13px; background-image: url('{THEME}/images/box_background.jpg');"></div>
	</div>
	<div style="margin-left: 10px; float: left;">
		<div style="height: 63px; width: 57px; background-image: url('{THEME}/images/content_top_left.jpg'); float: left;"></div>
		<div style="height: 63px; width: 448px; background-image: url('{THEME}/images/content_top.jpg'); float: left;"></div>
		<div style="height: 63px; width: 57px; background-image: url('{THEME}/images/content_top_right.jpg'); float: left;"></div>
		<div style="width: 562px; background-image: url('{THEME}/images/content_left.jpg'); float: left;">
    			<div style="width: 529px; background-image: url('{THEME}/images/content_right.jpg'); background-position: 1px 0px; float: right;">
    				<div style="width: 496px; background-image: url('{THEME}/images/content.jpg'); float: left;">Текст</div>
    			</div>
    		</div>
	</div>
	<div style="margin-left: 10px; float: left;">
		<div style="height: 48px; width: 209px; background-image: url('{THEME}/images/box_header.jpg');"></div>
		<div style="height: 200px; width: 183px; margin-left: 13px; background-image: url('{THEME}/images/box_background.jpg');"></div>
	</div>
</div>

Что я делаю не так?

[Great Rash]

Может для них места не хватает на экране вот и сползли?

[Watchman]

Может для них места не хватает на экране вот и сползли?

несколько раз пересчитывал попиксельно макет статичный

все вроде правильно

[Great Rash]

Ссылка есть?

[Watchman]

нет, на локалке делаю

тут, весь трабл в

		<div style="width: 562px; background-image: url('{THEME}/images/content_left.jpg');  float: left;">
			<div style="width: 529px; background-image: url('{THEME}/images/content_right.jpg'); background-position: 1px 0px; float: right;">
				<div style="width: 496px; background-image: url('{THEME}/images/content.jpg'); float: left;">Текст</div>
			</div>
		</div>

если убрать эти блоки, то все норм отображает

Edited August 13, 2010 by Watchman

[Great Rash]

Не видя страницы сложно о чем-то судить...

[Watchman]

что посоветуете?

[psywalker]

что посоветуете?

http://forum.htmlbook.ru/index.php?s=&...st&p=157147

[Watchman]

psywalker,

[psywalker]

psywalker,

Ссылочку попросили у тебя?

[swetlana]

Не видя страницы сложно о чем-то судить...

в данном случае и видя страницу — тоже.

[Watchman]

<div style="width: 562px; background-image: url('{THEME}/images/content_left.jpg');  float: left;">
	<div style="width: 529px; background-image: url('{THEME}/images/content_right.jpg'); background-position: 1px 0px; float: right;">
		<div style="width: 496px; background-image: url('{THEME}/images/content.jpg'); float: left;">Текст</div>
	</div>
</div>

в главном блоке заменил float: left на overflow: hidden Все стало на свои места, что это значит?(кроме того, что я полный нуб в блочной верстке)

[psywalker]

overflow: hidden создало отдельный контекст форматирования, а сам элемент растягивается на максимальную ширину, до первой преграды так сказать, как раз до колонок с флоат и отрезает всё лишнее.

[Watchman]

да нет, ничего не отрезало - все нормально отображается

[Watchman]

проблему решил, задав размер трем главным блокам