Проблема с float

oomozar · January 23, 2010

Столкнулся с проблемой - если к стилю подключать float:left/right; то этот div выходит изза мейн дива вниз,причем они не стоят около друг друга как по сути должны(раз флоат есть),

а тот кто выше в коде ,тот и стоит выше.

В IE8 такого косяка нет,есть косяк связанный с этим же с футером. А вот в firefox все перекашивает ппц.

Пробывал создавать 2 мейн дива один за другим,не помогает.

html

<body><center>
<div id="uppercontent" >
<div id="head" >
</div>
<div id="sponsors">
</div>
</div>
<div id="mainpart">
<div id="leftmenu">
</div>
<div id="maincontent">
</div>
<div id="footer">
Footer
</div>
</div>
</center>
</body>

css


#uppercontent {
width:950px;
margin:0px auto auto auto;
}
#mainpart {
width:950;
margin:0px auto auto auto;
}
#footer {
height:150px;
width:950px;
margin:auto auto 0px auto;
}
#sponsors {
height:50px;
width:950px;
}
#top {
margin:0px auto auto auto;
height:200px;
width:950px;
}
#leftmenu {
float:left;
width:150px;
margin:0px auto auto 0px;
}
#maincontent {
margin:0px 0px 0px auto;
width:800px;
height:1000px;
float:right;
}

Задача- чтобы leftmenu i maincontent были в одной горизонтали.

Edited January 23, 2010 by oomozar

psywalker · January 23, 2010

Ну не знаю, дело в том, что какая та чушь понаписана.

Попробуй так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">

#uppercontent {
width:950px;
margin:0px auto auto auto;
}
#mainpart {
width:950;
margin:0px auto auto auto;
}
#footer {
height:150px;
width:950px;
margin:auto auto 0px auto;
clear: both;
}
#sponsors {
height:50px;
width:950px;
}
#top {
margin:0px auto auto auto;
height:200px;
width:950px;
}
#leftmenu {
float:left;
width:150px;
margin:0px auto auto 0px;
background: red;
}
#maincontent {
margin:0px 0px 0px auto;
width:800px;
height:1000px;
float:right;
background: blue;
}
</style>
</head>

<body><center>
<div id="uppercontent" >
<div id="head" >
</div>
<div id="sponsors">
</div>
</div>
<div id="mainpart">
<div id="leftmenu">
g
</div>
<div id="maincontent">
</div>
<div id="footer">
Footer
</div>
</div>
</center>
</body>
</html>

oomozar · January 23, 2010

Ну не знаю, дело в том, что какая та чушь понаписана.
Попробуй так:

Но все равно при значении ширины 950px float раздвигает блоки к бокам бра-ра.

psywalker · January 23, 2010

Но все равно при значении ширины 950px float раздвигает блоки к бокам бра-ра.

Покажи скрин того, что хочешь получить с подробным объяснением.

oomozar · January 23, 2010

Покажи скрин того, что хочешь получить с подробным объяснением.

http://depositfiles.com/ru/files/rymff0vdd вот то что я хочу получить , и получил, но кривым способом и поэтому в файрфоксе (этот скрин) страница отображается нормально а в ИЕ вот так http://depositfiles.com/ru/files/97qr9d8al (((

psywalker · January 23, 2010

http://depositfiles.com/ru/files/rymff0vdd вот то что я хочу получить , и получил, но кривым способом и поэтому в файрфоксе (этот скрин) страница отображается нормально а в ИЕ вот так http://depositfiles.com/ru/files/97qr9d8al (((

Заведи себе хост. Намного полезнее, чем на Депозиты лить всякие, не каждый будет скачивать ведь.

Держи такой вариант, сделай каркас по нему.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3 Колонки</title>
<style type="text/css">
	*{ margin: 0; padding: 0;}
	body { min-width: 700px;}

	div.left,
	div.right { float: left; background: red; width: 300px;}
	div.right { float: right;}

	div.content { overflow: hidden; background: blue;}
</style>

<!--[if IE 6]>
<style type="text/css">

	body {width:expression(document.documentElement.clientWidth < 960 ? "960px" : "auto");}

	div.left { margin-right: -3px;}
	div.right {margin-left: -3px;}

	div.content {zoom: 1;}
</style>
<![endif]-->

</head>

<body>

	<div class="left">LEFT</div>
	<div class="right">RIGHT</div>
	<div class="content">CONTENTВы, как веб-разработчик, должны дорожить каждой минутой своего драгоценного времени, а не тратить его на «повторное изобретение колеса». Совсем необязательно из раза в раз создавать одни и те же макеты веб-страниц сайта, когда можно использовать готовые.

Готовые шаблоны хороши как раз тем, что для получения конечного результата достаточно внести в них незначительные корректировки и конечный продукт готов. При этом экономится уйма времени, которое, как известно, деньги!</div>


</body>
</html>

oomozar · January 23, 2010

Заведи себе хост. Намного полезнее, чем на Депозиты лить всякие, не каждый будет скачивать ведь.
Держи такой вариант, сделай каркас по нему.

Свой хостинг есть,что то не сообразил)

При изменении окна браузера центральный контент меняет размер ОМГ. Это же бред полный. Смысл так делать)

psywalker · January 23, 2010

При изменении окна браузера центральный контент меняет размер ОМГ. Это же бред полный. Смысл так делать)

Меняет размер чего?

mishka · January 23, 2010

margin:0px auto auto auto;

Макс, чтото я тя вообще неузнаю...

Или это чтото из раннего творчества?

psywalker · January 23, 2010

Макс, чтото я тя вообще неузнаю...
Или это чтото из раннего творчества?

Ххахаха

Да это же НЕ мой код, я просто кое что добавил в код ТС

Ты вставь этот код в редактор, неужели ты думаешь, я бы такую хрень понаписал-бы?

oomozar · January 23, 2010

Ххахаха
Да это же НЕ мой код, я просто кое что добавил в код ТС
Ты вставь этот код в редактор, неужели ты думаешь, я бы такую хрень понаписал-бы?

)))))

Меин части меняется размер.

psywalker · January 23, 2010

)))))
Меин части меняется размер.

То есть размер середины? Центральной колонки какбы?

А ты что хочешь, чтобы он НЕ менялся?

mishka · January 23, 2010

Ты вставь этот код в редактор, неужели ты думаешь, я бы такую хрень понаписал-бы?

Да конечно вставил бы, если бы дома моник не сгорел... Поэтому ща не из дому пишу.

Ну попытаюсь на словах немного обьяснить Тс что происходит.

Родительский элемент перестает удерживать в себе флотнутые дочерние элементы.

Для ие6-7 это решается назначением для родителя чего либо из этого: высота, ширина.

Для всех нормальных браузеров - overflow:hidden или

.родительский_блок:after{

content:"";

display:block;

clear:both;

}

У тебя получается что родителям ширины есть, поэтому в ие7 все ок.

И сам понимаешь что в твоем случае родителя флотать или абсолют родителю давать нестоит.

Поэтому overflow или after тебе в помощь.

Для центровки блока более чем достаточно назначить ему ширину и margin:0 auto;

margin:0 auto auto auto - это слишком много.

если у тя какойто параматр равен нулю, то ненадо указывать размерность

margin:0; - более правильно, чем margin:0px;

Edited January 23, 2010 by mishka2

oomozar · January 23, 2010

То есть размер середины? Центральной колонки какбы?
А ты что хочешь, чтобы он НЕ менялся?

Нет,и собственно вопрос темы ни в этом был. Не во внешних краях, а в решении проблемы размещения внутреннего контента на одинаковом уровне.

psywalker · January 23, 2010

Нет,и собственно вопрос темы ни в этом был. Не во внешних краях, а в решении проблемы размещения внутреннего контента на одинаковом уровне.

Дело в том, что на втором рисунке, где трабл с ИЕ, я увидел, что у тебя две колонки, и правая-контент, заходит под левую. Из этого я понял, что у тебя изначально неправильный подход к делу, и предложил тебе вариант прочного каркаса, который ты можешь переделать под себя.

oomozar · January 23, 2010

Дело в том, что на втором рисунке, где трабл с ИЕ, я увидел, что у тебя две колонки, и правая-контент, заходит под левую. Из этого я понял, что у тебя изначально неправильный подход к делу, и предложил тебе вариант прочного каркаса, который ты можешь переделать под себя.

Посмотрите личку плз

psywalker · January 23, 2010

Посмотрите личку плз

Проверил

Sign In

Проблема с float

Question

Link to comment

Share on other sites

16 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information