Проблема с шириной divs

Моя проблема заключается в том, что отношение ширины/высоты (для div с id = "wrapper", другое огромное), не то же самое в Chrome, Mozilla и IE (IE выглядит как атрибут отказа для heigt вообще). Любая помощь, мне нужны два фиксированных размера div, один рядом с другим.Проблема с шириной divs

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <title></title> 

     <style type="text/css"> 

      div#wrapper { 
       width: 1000px; 
       width:700px; 
       margin-left:auto; 
       margin-right:auto; 
       overflow: hidden; 
      } 
      div#left { 
       width: 80%; 
       height: 80%; 
       min-height: 80%; 
       float: left; 
       background-color: #DFDFDF; 
       border-left-width:2px; 
       border-left-style:solid; 
       border-left-color:#606060; 
       border-bottom-width:2px; 
       border-bottom-style:solid; 
       border-bottom-color:#606060; 
       border-top-width:2px; 
       border-top-style:solid; 
       border-top-color:#606060; 
      } 
      div#right_up { 
       width: 19%; 
       height: 80%; 
       min-height: 80%; 
       float: left; 
       background-color: whitesmoke; 
       border-top-width:2px; 
       border-top-style:dashed; 
       border-top-color:#FF2A2A; 
       border-right-width:2px; 
       border-right-style:dashed; 
       border-right-color:#FF2A2A; 
       border-left-width:2px; 
       border-left-style:solid; 
       border-left-color:whitesmoke; 
      } 


     </style> 
    </head> 
    <body id="body""> 
     <div id="wrapper"> 
      <div id="left"> 
         REFERENCE: 

      </div> 
      <div id="right_up"> 

      </div> 

     </div> 
    </body> 
</html>

источник

2010-10-24 Rebecca

Прежде всего вы не можете использовать процентные высоты на плавающих элементах.

Во-вторых, я не вижу никакой высоты установки на оберточной DIV

источник

2010-10-24 22:13:31

Убедитесь, что ваш код проверяет: http://validator.w3.org/. Исправление небольших ошибок, которые он найдет, приведет к значительному расхождению между браузерами.

Например, вы указали width атрибут дважды для #wrapper, что не имеет никакого смысла.

источник

2010-10-24 22:15:01

Эй, Ребекка и добро пожаловать в СО! :)

Прежде всего, я не думаю, что вы могли бы когда-либо иметь смешанные единицы измерения, действовать так, как вы хотите. У вас есть ширина divs в процентах и ширина границы в пикселях, в основном вы надеетесь, что 1% никогда не будет означать больше, чем 2px для ширины обертки.

Давайте сделаем это шаг за шагом. Прежде всего, у вас есть 2 ширины для обертки div. Второй будет перезаписывать первый, и вы получите ширину 700 пикселей. Это очень мало, вы должны пересмотреть ширину 960px или максимум. из 990px (что гарантирует вам не будет иметь горизонтальную полосу прокрутки на 99,9% разрешений экрана сегодня

Давайте перепишем, что:.

div#wrapper { 
    width: 700px; /* 700 to stick to your design */ 
    margin: 0 auto; /* which is basically the same as you have, but in one property, not two */ 
    overflow: hidden; 
} 

div#left { 
    width: 558px; /* 80% of 700px (wrapper div) minus the border width. It will never change so there's no need to set it in percentages */ 
    height: 80%; /* height will overwrite min-height on FF for example. Also, min-height doesn't work in IE, setting a fixed height might be the best way to go */ 
    min-height: 80%; 
    float: left; 
    background-color: #DFDFDF; 
    border: 2px solid #606060; /*set a border all over the div */ 
    border-right: 0; /* and remove the right border */ 
} 

div#right_up { 
    width: 140px; /* 20% of 700px */ 
    height: 80%; /* same height problem as you have for the other div here */ 
    min-height: 80%; 
    float: right; /* float right, not left like the other one */ 
    background-color: whitesmoke; /* please set colors in hex, not like this */ 
    border: 2px dashed #FF2A2A; 
    border-left: 2px solid whitesmoke; /* again, colors in hex please */ 
    border-bottom: 0; 
}

Кроме того, добавить DIV с классом четкое в разметки, как это:

<div id="wrapper"> 
    <div id="left"> 
     REFERENCE: 
    </div> 
    <div id="right_up"> 

    </div> 
    <div class="clear"></div> 
</div>

И добавить определение класса в CSS, как это:

.clear { 
    clear: both; 
}

Последний совет должен Allways поставить CSS во внешней таблице стилей и ссылаться на него на вашей странице в головной части HTML, как это:

<link rel="stylesheet" type="text/css" href="path/to/style.css">

Успехов!

источник

2010-10-24 22:27:45 Claudiu

Проблема с шириной divs

ответ

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