Подреждане на дивове под IE

[sentenello]

Здравейте,
Ето ми я предишната тема в която съм написъл и решението на проблема, но не видях, че не става под IE
http://web-tourist.net/forum/viewtopic.php?t=105409

Ако може да ми кажете какво да направя, че да ги подреди правилно и в IE не само под Мозила и Хром с които тествам в момента.

 

[confiscate]

Мисля , че това ще ти помогне : http://www.maxdesign.com.au/articles/css-layouts/three-fixed/

 

[Fakeheal]

<style>
	#container {
	 width: 800px; /* примерна ширина */
	 margin: 0 auto; /* ако искаш да е центриран */
	 background-color: black; /* за примера :) само */
	}

	#left {
	 width: 200px; /* примерна ширина */
	 height: 200px; /* примерна височина */
	 background-color: red; /* за примера :) само */
	 float: left; /* бутаме го в ляво */
	}
	
	#center {
	 width: 400px;/* примерна ширина */
	 height: 200px;  /* примерна височина */
	 background-color: green; /* за примера :) само */
	 float: left; /* бутаме го в ляво */
	}
	#right {
	 width: 200px; /* примерна ширина */
	 height: 200px; /* примерна височина */
	 background-color: blue; /* за примера :) само */
	 float: right; /*бутаме го в дясно */
	}
</style>
<div id="container">
<div id="left"> Ляво </div>
<div id="center"> Център </div>
<div id="right"> Дясно </div>
<div style="clear: both;"></div> 
</div>

 

[adrian]

IE не се справя с inline-block;

В края на css свойствата ако добавиш:

#left {
..
...
...
*display: inline;
zoom: 1;
}

ще оправиш този проблем. Но този метод не ми се вижда кой знае колко удачен специално за това. Можеш да използваш начина на Fakeheal, само дето изчистващия див трябва да е в container, а не извън него И аз от известно време предпочитам да го сложа на br, а не на div

П.С.

Още един метод:

#container {
position: relative; /*за да можеш да позоционираш двата дива вътре в него */
width: 800px /* примерно */
}
#left, #right {
position: absolute; /*абсолютно позоционирани в родителя (затова има position: relative на #container */
top: 5px; /* 5px надолу от горния ръб на родителя, за да не са долепени както е на картинката */
width: 200px;
}
#left {
left: 5px; /*левия да започва 5px от левия ръб */
}
#right {
right: 5px; /*десния да започва 5px от десния ръб */
}

<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>

Не съм го тествал за някое малко бъгче, но би трябвало да работи както се очаква (този метод ти го показвам, за да видиш и друг начин, аз лично бих използвал начина в горния пост)

 

[Fakeheal]

@adrian, мерси за поправката. И имам един въпрос към теб, ако не сме фиксирали дължината на контейнера ефекта пак ли ще е същия?

 

[adrian]

За float трябва да има някаква широчина зададена. Сега нямам време да пробвам ако не се зададе широчина кой браузър ще се прецака, но трябва да има width (дали в проценти, или пиксели, но трябва) или все някой браузър (клоня към IE 6-7) няма да се справи с float