Проблема с float в IE 6-7

Apologet · 21.03.2012, 18:07

Позвольте вопрос по верстке. Проблема с float в IE 6-7. Есть макет сайта, имеющий структуру, как на схеме (упрощенно). Суть в том, что в в div основного контента вставлены два дива, один из которых, по замыслу должен быть пристыкован к левому краю, второй, соотоветственно к правому. Внутри каждого пристыкованного дива находится таблица для структурирования контента.
Для левого пристыкованного прописано align:left; float:left, для правого, соответственно align:right ; float:right.
Во всех браузерах отображается нормально, кроме IE 6-7. В IE 6-7 текст не обтекает внутренние диву и "спускается" ниже, а между внутреннними дивами отображается пустое поле. Как решить проблему? Спасибо.
Схема:
http://imagesbase.com/upload/view/ma...5k94t13bwm.gif

maxefect · 21.03.2012, 20:34

Накидал приблизительный макет! Надеюсь вам то нужно!!!

Код HTML:

<!Doctype html>
<html>
<head>
<style>

.wrap {width:1000px; height:1000px; margin:0 auto; outline:1px solid #000}
#header {width:100%; height:100px;  outline:1px solid #000}
#rap {width:100%; height:80%; outline:1px solid #000}
.leftcol {width:25%;float:left; height:100%; outline:1px solid #000}
.center {width:50%; height:100%; float:left; outline:1px solid #000;}
.rightcol {width:25%; height:100%; float:right; outline:1px solid #000}

</style>
</head>
<body>
<div class="wrap">
	<div id="header"></div>
	<div id="rap">
		<div class="leftcol">
			<table border="1" align="center" cellpadding="20" cellspacing="1">
			  <tr>
				<td>Текст</td>
				<td>Текст</td>
				<td>Текст</td>
			  </tr>
			  <tr>
				<td>Текст</td>
				<td>Текст</td>
				<td>Текст</td>
			  </tr>
			  <tr>
				<td>Текст</td>
				<td>Текст</td>
				<td>Текст</td>
			  </tr>
			  <tr>
				<td>Текст</td>
				<td>Текст</td>
				<td>Текст</td>
			  </tr>
			</table>
		</div>
		<div class="center">
			<table border="1" align="center" cellpadding="20" cellspacing="1">
			  <tr>
				<td>Текст</td>
				<td>Текст</td>
				<td>Текст</td>
			  </tr>
			  <tr>
				<td>Текст</td>
				<td>Текст</td>
				<td>Текст</td>
			  </tr>
			  <tr>
				<td>Текст</td>
				<td>Текст</td>
				<td>Текст</td>
			  </tr>
			  <tr>
				<td>Текст</td>
				<td>Текст</td>
				<td>Текст</td>
			  </tr>
			</table>
		</div>
		<div class="rightcol">
			<table border="1" align="center" cellpadding="20" cellspacing="1">
			  <tr>
				<td>Текст</td>
				<td>Текст</td>
				<td>Текст</td>
			  </tr>
			  <tr>
				<td>Текст</td>
				<td>Текст</td>
				<td>Текст</td>
			  </tr>
			  <tr>
				<td>Текст</td>
				<td>Текст</td>
				<td>Текст</td>
			  </tr>
			  <tr>
				<td>Текст</td>
				<td>Текст</td>
				<td>Текст</td>
			  </tr>
			</table>
		</div>
	</div>
 
 
</div>

</body>
</html>

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
CSS (float) Цвет не ложится полностью	Ван	HTML, CSS, JavaScript	7	13.03.2015 13:41
Странно себя ведет float: left	dima_kiv	HTML, CSS, JavaScript	2	04.05.2011 11:32
float и position проблема	life24x7	HTML, CSS, JavaScript	9	19.09.2009 13:42
Float и valign	adbared	HTML, CSS, JavaScript	7	04.06.2008 18:10
Проблема с CSS параметром float в div боксах	dav	HTML, CSS, JavaScript	1	18.12.2006 14:03

21.03.2012, 18:07	#1
Apologet	Позвольте вопрос по верстке. Проблема с float в IE 6-7. Есть макет сайта, имеющий структуру, как на схеме (упрощенно). Суть в том, что в в div основного контента вставлены два дива, один из которых, по замыслу должен быть пристыкован к левому краю, второй, соотоветственно к правому. Внутри каждого пристыкованного дива находится таблица для структурирования контента. Для левого пристыкованного прописано align:left; float:left, для правого, соответственно align:right ; float:right. Во всех браузерах отображается нормально, кроме IE 6-7. В IE 6-7 текст не обтекает внутренние диву и "спускается" ниже, а между внутреннними дивами отображается пустое поле. Как решить проблему? Спасибо. Схема: http://imagesbase.com/upload/view/ma...5k94t13bwm.gif