Наслаиваются <div>

kent666 · June 14, 2011

Помогите пожалуйста! У меня в верстке наслаиваются дивы друг на друга!!! <div id="bottom"> налазиет на <div id="container">

Как это исправить код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <title>шаблон</title>  
    <meta name="keywords" content="" />  
    <meta name="description" content="" />  
    <link type="text/css" rel="stylesheet" href="style.css" /> 
</head>
<body>
    <div id="layer">

        <div id="top"></div><!--id="top"-->

        <div id="menu">
            <ul> 
                <li><a href="#">ГЛАВНАЯ</a></li> 
                <li><a href="#">О КОМПАНИИ</a></li> 
                <li><a href="#">ПАРК АВТОМОБИЛЕЙ</a></li>
                <li><a href="#">КЛИЕНТАМ</a></li> 
                <li><a href="#">ВОДИТЕЛЯМ</a></li>
                <li><a href="#">ПАРТНЕРЫ</a></li>  
            </ul> 
        </div><!--id="menu"-->

        <div id="container"> 

            <div id="left">
                <ul> 
                    <li><a href="#">ПРАЙС ЛИСТ</a></li> 
                    <li><a href="#">ОНЛАЙН ЗАКАЗ</a></li> 
                    <li><a href="#">ОТЗЫВЫ</a></li>
                    <li><a href="#">КОНТАКТЫ</a></li> 
                </ul>
            </div><!--id="left"-->

            <div id="right">
                CONTENT
            </div><!--id="right"-->

        </div><!--id="container"-->

        <div id="bottom">
            <ul> 
                <li><a href="#">ГЛАВНАЯ</a></li>|
                <li><a href="#">О КОМПАНИИ</a></li>|
                <li><a href="#">ПАРК АВТОМОБИЛЕЙ</a></li>|
                <li><a href="#">КЛИЕНТАМ</a></li>| 
                <li><a href="#">ВОДИТЕЛЯМ</a></li>|
                <li><a href="#">ПАРТНЕРЫ</a></li>
            </ul>
        </div><!--id="bottom"-->

    </div><!--id="layer"-->
</body>
</html>

и CSS

* {
	margin: 0;
	padding: 0;
}
BODY {
    background: #C9C2C2;    
}
#layer {
    width: 1000px;
    background: aqua;
}

#top {
    width: 1000px;
    height: 200px;
    border: 2px #000000;
    background: #FFFF99;
}

#menu {
    margin: 5px 50px 5px 50px;
    border: 2px #000000;
    background: #CCFFCC;
}

#menu ul { margin:0; padding:0;}
#menu ul li{ display:inline-block; float:left; width:150px; list-style:none; text-align:center;}
#menu a { display:block; float:left; width:145px; font-size:12px; text-transform:uppercase; text-decoration:none; color:#FFFFFF; text-decoration:none; font-weight:bold }
#menu a:hover {color:#68d3ed;}


#container{
    background: #FFFFFF;
    display:block;

}

#left{
    background: #00CCFF;
    width: 150px;
    margin: 5px;
    float: left;
}
#left ul { margin:0; padding:0;}
#left ul li{float:left;}
#left a { display:block; float:left; width:104px; font-size:12px; text-transform:uppercase; color:#FFFFFF; text-decoration:none; font-weight:bold }
#left a:hover {color:#68d3ed;}


#right{
    background: #FF99CC;
    width: 830px;
    margin: 5px;
    float: right;
}

#bottom{
    margin: 10px;
    background: #C0C0C0;
}

#bottom ul { margin:0; padding:0;}
#bottom ul li{ display:inline-block; float:right; width:150px; list-style:none; text-align:center;}
#bottom a { display:block; float:left; width:145px; font-size:12px; text-transform:uppercase; text-decoration:none; color:#FFFFFF; text-decoration:none; font-weight:bold }
#bottom a:hover {color:#68d3ed;}

ctpz · June 15, 2011

Перед

<div id="bottom">

вставляешь

<div id="clear"> </div>

CSS


#clear{clear:both; line-height:0px; width:1000px;}

Edited June 15, 2011 by ctpz

Dinow · June 15, 2011

Можно и без добавления лишнего дива

В СSS впиши

#container:after {
content: "";
display: block;
clear: both;
}

А для ИЕ

#container {
zoom: 1;
display: block; 
}

ctpz · June 15, 2011

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

kent666 · June 15, 2011

Спасибо)

ctpz · June 15, 2011

благодарность = плюс

Gaspode · June 15, 2011

Ещё проще:

#container {
   overflow: hidden;
}

и всё.

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

Если не вставлять в див#clear, то в стилях для него достаточно только clear: both.

Edited June 15, 2011 by Gaspode

Sign In

Наслаиваются <div>

Question

kent666

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

ctpz

Link to comment

Share on other sites

Dinow

Link to comment

Share on other sites

ctpz

Link to comment

Share on other sites

kent666

Link to comment

Share on other sites

ctpz

Link to comment

Share on other sites

Gaspode

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information