Сжатие содержимого внутри див при уменьшении экрана

@Semenovich · Регистрация: 16.11.2010

Author24 — интернет-сервис помощи студентам

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

@Vicont · 05.10.2011, 23:39

Вы можете продемонстрировать код? Сложно что либо говорить не видя верстки перед собой.

@Semenovich · 06.10.2011, 00:13 **[ТС]**

Три блока внутри класса миддле:

HTML5

<div id="wrapper">
   <div id="middle">
       <div class="header">
       <div class="container">
  <div class="headleft">
</div><!------------headleft------------>    
         <div class="middle">
         
         <div id="log"></div>
         <div id="logo"></div>
         <div id="slog"></div>
 
        </div><!---------------class"middle"---------> 
     </div><!--------------- class=container----->    
      <div class="headright">
        </div><!----- headright------------>
           </div><!-------header---->

CSS

#wrapper {
    min-width: 800px;
    max-width: 1400px;
    margin: 0 auto;
}
 
 
/* Header
-----------------------------------------------------------------------------*/
.header {min-width: 800px;
    max-width: 1400px;
    margin: 0 auto;
     height: 172px;   
}
 
.headleft { 
    float:left; 
    height:160px; 
    width:250px;
    margin:10px 10px 0px 10px;
        border:solid 1px #225599;
 behavior: url(PIE.hts);
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
}
 
.middle { 
 margin:10px 275px 0px 275px;
     height:160px;     
     border:solid 1px #225599;  
     behavior: url(PIE.hts);
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
  }
.headright { position:absolute;
    margin:10px 0px 0px 10px;
    right:10px;
    height:160px; 
    width:250px;
    border:solid 1px #225599;
 behavior: url(PIE.hts);
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
}
#log {float:left; padding-left:25px; 
}
 
#logo {float:left; background:url(../img/lady.jpg); background-repeat:no-repeat;
width:281px;
height:159px; 
}
#slog {position:absolute;
right:280px;
       width:250px;
}
.clearfloats {clear:both;}
/* Middle
-----------------------------------------------------------------------------*/
#middle {
    width: 100%;
    height: 1%;
    position: relative;
}
#middle:after {
    content: '.';
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
}
#container {background: #FFFFFF;
    width: 100%;
    float: left;
    overflow: hidden;
}
.container {background: #FFFFFF;
    width: 100%;
    float: left;
    overflow: hidden;

@challengerr · 06.10.2011, 14:29

В спецификации CSS написано следующее:
If the current box is left-floating, and there are any left-floating boxes generated by elements earlier in the source document, then for each such earlier box, either the left outer edge of the current box must be to the right of the right outer edge of the earlier box, or its top must be lower than the bottom of the earlier box. Analogous rules hold for right-floating boxes.
Если текущий ящик плавающий налево и есть плавающие налево ящики сгенерированные ранее тогда для каждого предыдущего ящика либо левая внешняя граница текущего ящика должна быть справа от правой внешней грани предыдущего ящика либо вершина текущего ящика должна быть ниже чем низ предыдущего ящика. Аналогично правило применяется к плавающим направо ящикам.

Это значит что то что средний ящик выпадает вниз от предыдущего соответствует спецификации. Как сделать так чтобы они не выпадали а всегда оставались в одной строке я и сам хотел бы узнать.

@Rikani · 06.10.2011, 15:06

Только если задавать контейнеру этих плавающих элементов минимальную или фиксированную ширину больше(или равную) суммарной ширины контейнеров внутренних элементов.

@Semenovich · 06.10.2011, 15:10 **[ТС]**

Сообщение от Rikani

Только если задавать контейнеру этих плавающих элементов минимальную или фиксированную ширину больше(или равную) суммарной ширины контейнеров внутренних элементов.

т.е задавать абсолют и делать контейнер накладным?

@Semenovich 37 / 31 / 3 Регистрация: 16.11.2010 Сообщений: 451
		1
	Сжатие содержимого внутри див при уменьшении экрана 05.10.2011, 20:26. Показов 13360. Ответов 5 Метки нет (Все метки) В хедере стоит три блока - левый и правый фиксированые а средний плавающий. В среднем блоке размещены три дива. Правый фиксированный с абсолютным позиционированием. Левый - флоат. При уменьшении монитора средний блок вылетает а содержимое левого и правого соединяются. Как сделать, чтобы все плавно сжималось? 0

@Vicont front-end developer 284 / 275 / 39 Регистрация: 31.08.2010 Сообщений: 577 Записей в блоге: 1
	05.10.2011, 23:39	2
	Вы можете продемонстрировать код? Сложно что либо говорить не видя верстки перед собой. 0

@challengerr 44 / 37 / 6 Регистрация: 30.07.2008 Сообщений: 136
	06.10.2011, 14:29	4
	В спецификации CSS написано следующее: If the current box is left-floating, and there are any left-floating boxes generated by elements earlier in the source document, then for each such earlier box, either the left outer edge of the current box must be to the right of the right outer edge of the earlier box, or its top must be lower than the bottom of the earlier box. Analogous rules hold for right-floating boxes. Если текущий ящик плавающий налево и есть плавающие налево ящики сгенерированные ранее тогда для каждого предыдущего ящика либо левая внешняя граница текущего ящика должна быть справа от правой внешней грани предыдущего ящика либо вершина текущего ящика должна быть ниже чем низ предыдущего ящика. Аналогично правило применяется к плавающим направо ящикам. Это значит что то что средний ящик выпадает вниз от предыдущего соответствует спецификации. Как сделать так чтобы они не выпадали а всегда оставались в одной строке я и сам хотел бы узнать. 1

@Rikani 35 / 35 / 1 Регистрация: 27.07.2011 Сообщений: 85
	06.10.2011, 15:06	5
	Только если задавать контейнеру этих плавающих элементов минимальную или фиксированную ширину больше(или равную) суммарной ширины контейнеров внутренних элементов. 0

@Semenovich 37 / 31 / 3 Регистрация: 16.11.2010 Сообщений: 451
	06.10.2011, 15:10 [ТС]	6
	Сообщение от Rikani Только если задавать контейнеру этих плавающих элементов минимальную или фиксированную ширину больше(или равную) суммарной ширины контейнеров внутренних элементов. т.е задавать абсолют и делать контейнер накладным? 0

Опции темы