Проблема с "отталкиванием" блока

strangerliquid · August 29, 2011

Вот такая проблемка. При увеличении блока left не отталкивается блок bottom. все это находится в блоке контент (футер отдельно), вот коды :

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="css/template.css"/>
    <title>Заготовка_под_сайт_универсальная</title>
</head>
<body>
        <div id="header">
        </div>
        <div id="menu">
        </div>
            <div id="container">
            <div id="content">
                <div id="left">
                    </div>
                    <div id="right">
                    </div>
                    <div id="center">
                    </div>
                </div>
                <div id="bottom">
                </div>
            </div>
</body>
<div id="clear">
</div>
<div id="footer">
</div>
</html>

а вот CSS :

body {
    width:1024px;
    min-height:100%;
    background-color:#CCCCCC;
    margin:0 auto;
}
#header {
    width:100%;
    height:150px;
    background-color: #CC3333;
}
#menu {
    width:100%;
    height:60px;
    background-color:#00FF00;
}
/*—————MAIN-CONTENT————————-*/
#content {
    width:100%;
    background-color:#000;
}
#container {
    width:100%;
    background-color: #66CCCC;
}
#bottom {
    width:100%;
    height:100px;
    background-color: #9966FF;
}
#left {
    width:212px;
    height:1300px;
    background-color:#FFFF99;
    float:left;
}
#right {
    width:212px;
    height:1000px;
    background-color: #77AAFF;
    float:right;
}
#center {
    margin:0 auto;
    width:600px;
    min-height:1000px;
    background-color: #CC9900;
}

/*—————MAIN-CONTENT-END————————--*/
#clear {
    width:100%;
    height:0px;
    clear:both;
}
#footer {
    width:100%;
    height:100px;
    position:relative;
    background-color:#00CC99;
}

Буду благодарен за помощь.. (кстати с футером я чего-то намудрил тоже.

Картинка иллюстрирующая проблемуФиолетовый блок должен отталкиваться светло-желтым

Edited August 30, 2011 by strangerliquid

MaferoK · August 29, 2011

код в теги [ code ] [ /code ] (без пробелов)

ато Влад тебе щас напихает ^^,

amelice · August 30, 2011


   </body> — Это ошибка!
<div id="clear">
</div>
<div id="footer">
</div>
</html>

Попробуйте сюда добавить clear:both;


#bottom {
    width:100%;
    height:100px;
    background-color: #9966FF;
}

zSpx · August 30, 2011

Во-первых, закрывается боди перед футером, что это вообще? Исправить. Во-вторых, div.container задать overflow:hidden, что бы не схлопывался и в-третьих, зачем вам столько айдишников? для разметки достаточно классов. И еще, div#clear там не нужен.

Edited August 30, 2011 by zSpx

strangerliquid · August 31, 2011

спасибо за ответы попробую, насчет классов задавался вопросом - какие преимущества при их использовании, насчет футера за body меня уже сегодня человек просветил. насчет команд посмотрю на сайте.

Sign In

Проблема с "отталкиванием" блока

Question

strangerliquid

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

MaferoK

Link to comment

Share on other sites

amelice

Link to comment

Share on other sites

zSpx

Link to comment

Share on other sites

strangerliquid

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information