Большое пространство при использовании clear: both

У меня проблема.Большое пространство при использовании clear: both

HTML

<!DOCTYPE html> 
<html> 
<head> 
<title>Nor-Avetisyan</title> 
<link rel="stylesheet" type="text/css" href="views/css/style.css" /> 
<script src="views/js/jquery-2.0.1.min.js"></script> 
<script> 
/*$(document).ready(function() { 
var width = $('#site-content-left').width(); 
alert(width); 
}); 
*/ 
</script> 
</head> 
<body> 
<div id="site-page"> 
    <div id="site-under-header"> 
     <a class="flag-arm" href="#"></a> 
     <a class="flag-en" href="#"></a> 
     <div class="clear"></div> 
    </div> 
    <div id="site-header"> 
     <div id="site-header-center"></div> 
    </div> 
<div id="site-content-container"> 
     <div id="site-menu"> 
      <a id="menu-glxavor" href="#"></a> 
      <a id="menu-mermasin" href="#"></a> 
      <a id="menu-usucich" href="#"></a> 
      <a id="menu-ashakert" href="#"></a> 
      <a id="menu-shrjanavartner" href="#"></a> 
      <a id="menu-norutyunner" href="#"></a> 
      <a id="menu-mankapartez" href="#"></a> 
      <a id="menu-nyuter" href="#"></a> 
      <a id="menu-bajanortagrvel" href="#"></a> 
     </div> 
     <div id="site-content"> 
      <div id="site-content-left"> 
      <h1>Նոր կառուցվող դպրոցաշեքն</h1> 
      </div> 
      <div id="site-content-right"> 
      sd 
      </div> 
      <div class="clear"></div> 
      <div id="site-content-news"> 
      a 
      </div> 
      <div id="site-content-social"> 
      soc 
      </div> 
     </div> 
<div class="clear"></div> 
<a id="kap" href="#"></a> 
<div id="site-footer"> 
      Copyright 
     </div> 
    </div> 
</div>

CSS

@font-face { 
    font-family: erevan; 
    src: url(../fonts/erevan.ttf); 
    } 
body { 
background:#e4eef7; 
margin:0 
} 
#site-page{ 
    margin: 0 auto; 
    width: 100%; 
} 
#site-under-header{ 
width:950px; 
margin:0 auto; 
text-align:right; 
padding:3px 0; 
} 
#site-under-header .flag-arm {background:url('../images/flag-arm.png') no-repeat;width:40px;height:40px;float:right;margin-left:5px;} 
#site-under-header .flag-en {background:url('../images/flag-en.png') no-repeat;width:40px;height:40px;float:right;} 
#site-header{ 
    background: url('../images/site-header-repeat.png') repeat-x; 
    height:220px; 

} 
#site-header-center{ 
    background: url('../images/site-header.png') no-repeat; 
    width:1000px; 
    height:220px; 
    margin:0 auto; 
} 
#site-content-container{ 
    width: 100%; 
} 

#site-content{ 
    margin-left:400px; 
    padding: 20px 0; 

} 
#site-menu{ 
    float:left; 
    width: 400px; 
    padding: 20px 0; 
} 
#site-menu #menu-glxavor{background:url('../images/menu-glxavor.png') no-repeat;width:320px;height:68px;display:block;margin:0 0 25px 0;} 
#site-menu #menu-mermasin{background:url('../images/menu-mermasin.png') no-repeat;width:320px;height:68px;display:block;margin:0 0 25px 0;} 
#site-menu #menu-usucich{background:url('../images/menu-usucich.png') no-repeat;width:320px;height:68px;display:block;margin:0 0 25px 0;} 
#site-menu #menu-ashakert{background:url('../images/menu-ashakert.png') no-repeat;width:320px;height:68px;display:block;margin:0 0 25px 0;} 
#site-menu #menu-shrjanavartner{background:url('../images/menu-shrjanavartner.png') no-repeat;width:320px;height:68px;display:block;margin:0 0 25px 0;} 
#site-menu #menu-norutyunner{background:url('../images/menu-norutyunner.png') no-repeat;width:320px;height:68px;display:block;margin:0 0 25px 0;} 
#site-menu #menu-mankapartez{background:url('../images/menu-mankapartez.png') no-repeat;width:320px;height:68px;display:block;margin:0 0 25px 0;} 
#site-menu #menu-nyuter{background:url('../images/menu-nyuter.png') no-repeat;width:320px;height:68px;display:block;margin:0 0 25px 0;} 
#site-menu #menu-bajanortagrvel{background:url('../images/menu-bajanortagrvel.png') no-repeat;width:320px;height:68px;display:block;margin:0 0 25px 0;} 

#site-footer{ 
    background: #fff; 
    text-align: right; 
    padding: 20px; 
    height: 34px; 

    margin:80px 0 25px 0; 
} 
#kap {background:url('../images/kap.png') no-repeat;width:300px;height:230px;float:left;clear:both;margin:0 0 25px 0;} 
.clear{clear:both;} 
#site-content-left{background:red;float:left;} 
#site-content-right{background:blue;width:300px;float:left;} 
#site-content-left h1{margin:0;} 
#site-content-news{float:left;} 
#site-content-social{float:left;}

<div class="clear"></div> я добавил после site-content-right. Теперь site-content-news и site-content-social уменьшены примерно на 1000px. Таким образом, появляется большое пространство, когда я добавляю четкость между div. Помогите пожалуйста

источник

2013-05-31 Anonymous

Проблема заключается в вашем # сайте-меню. Он довольно длинный и плавает влево. Когда вы очищаете оба, вы очищаете длинное меню и создаете длинную пустую область.

источник

2013-05-31 18:57:23

Как я могу решить эту проблему? –

К сожалению, нет стандартного или легкого ответа. Вы можете перестать плавать в своем меню или дать ему абсолютную позицию ... существует множество способов решения проблемы, но это зависит от вашего точного сайта. –

Хорошо, я добавил float: осталось на сайт-контент, на данный момент он решен. благодаря! –

Большое пространство при использовании clear: both

ответ

Смежные вопросы