Jump to content
  • 0

Проблема с float


oomozar
 Share

Question

Столкнулся с проблемой - если к стилю подключать 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 by oomozar
Link to comment
Share on other sites

16 answers to this question

Recommended Posts

  • 0

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

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

<!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>

Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

  • 0
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>

Link to comment
Share on other sites

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

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

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

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

Link to comment
Share on other sites

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

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

Ххахаха :)

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

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

Link to comment
Share on other sites

  • 0
Ххахаха :)

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

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

)))))

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

Link to comment
Share on other sites

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

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

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

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

Для ие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 by mishka2
Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy