Ограничение минимальных размеров div

serzh · May 13, 2008

Здравствуйте.

Обращаюсь с вот такой проблемой, для которой никак не могу подобрать решение.

Есть "резиновая" страница, состоящая из двух колонок на базе div: правая фиксированной ширины для меню навигации, а левая - с основным текстом, горизонтальные размеры которой подстраиваются под размеры окна браузера. Под текстом находится форма обратной связи. Можно ли как-то ограничить горизонтальные размеры левой колонки оредел?нной величиной, скажем, 300px? Пока никакого решения (без использования таблиц) не наш?л. Просто если совсем сузить окно браузера, элементы формы залезают на меню навигации, а мне этого не нужно.

3ABAPKA · May 13, 2008

Вроде так делают

*width:300px;=в IE

min-width:300px;= FF, Opera

serzh · May 13, 2008

Нет, это не помогает ни в одном браузере.

Константин · May 13, 2008

min-width:300px; + экспрешн для ie6?

serzh · May 13, 2008

Нет, это не помогает ни в одном браузере.

Эээ..., поторопился. Надо было применить указанные свойства к диву, который объединяет обе колонки Для оперы и лисы добился положительного результата, а вот для IE6 - дизайн просто стал фиксированной ширины (улетучилась "резиновость" )

*width:300px;=в IE

Здесь зв?здочнка - не опечатка?

serzh · May 13, 2008

min-width:300px; + экспрешн для ie6?

Извините, но я не понял вашего вопроса. Что такое "+ экспрешн для ie6"?

3ABAPKA · May 14, 2008

*width:300px;=в IE
Здесь зв?здочнка - не опечатка?

Звездочка не опечатка!

serzh · May 14, 2008

2 ЗАВАРКА

Как не игрался - не помогает. Я в трауре...

strix · May 15, 2008

Как не игрался - не помогает. Я в трауре...

Код в студию!

ProGGGer · May 15, 2008

#min-width {
min-width:800px;
width:expression(document.body.clientWidth < 770? "770px": "auto" );
}

Используя JS.

Подробнее смотреть тут:

http://cssing.org.ua/2005/09/02/min-width-for-ie/

serzh · May 15, 2008

Наш?л несколько решений для создания аналога min-width под IE 6. Для наступающих на те же грабли, в дополнение к предыдущему посту привожу ещ? один вариант:

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title> min-width in Internet Explorer - fixed </title>

<style type="text/css">
body {background:#fff; font-family:"trebuchet ms", "times new roman", times, serif; font-size:76%;}
.css {color:#983; font-family:"times new roman", serif;}
.play {font-family:"trebuchet ms", tahoma, arial, verdana, sans-serif; margin:0; color:#000; font-weight:normal;}


/* for all browsers that understand min-width */
.container {position:relative; width:90%; min-width:400px;}
.holder {display:block; color:#000;}

/* method 1 a bodge for IE5.5 and IE6 browsers */
* html .container {border-right:400px solid #fff;}
* html .holder {display:inline-block; position:relative; margin-right:-400px;}

/* for all browsers that understand min-width */
.container2 {position:relative; width:90%; min-width:400px;}
.holder2 {display:block; color:#000;}

/* method 2 a bodge for IE browsers IE5.01, IE5.5 and IE6 */
* html .container2 {border-right:400px solid #fff;}
* html .holder2 {float:left; position:relative; margin-right:-400px;}

/* General styling */
h1 {
 font-size: 5.3em;
 letter-spacing: -3px;
 color:#06a;
 font-weight:normal;
 margin:0;
 font-family:"times new roman", times, serif;
 }

h2 {
 font-size: 2em;
 color:#f60;
 font-weight:normal;
 margin-top:0; 
 padding:top:1em;
 }

.b1 {height:1px; font-size:1px; overflow:hidden; display:block; background:#aaa; margin:0 5px;}
.b2 {height:1px; font-size:1px; overflow:hidden; display:block; background:#fff; border-right:2px solid #aaa; border-left:2px solid #aaa; margin:0 3px;}
.b3 {height:1px; font-size:1px; overflow:hidden; display:block; background:#fff; border-right:1px solid #aaa; border-left:1px solid #aaa; margin:0 2px;}
.b4 {height:2px; font-size:1px; overflow:hidden; display:block; background:#fff; border-right:1px solid #aaa; border-left:1px solid #aaa; margin:0 1px;}
.content {border-right:1px solid #aaa; border-left:1px solid #aaa;}

h1, h2, h3, h4, p {margin-left:5px; margin-right:5px;}
p {margin-bottom:0; padding-bottom:1em;}
.rule {width:400px; background:#c00; color:#fff; margin:1em 0;}
</style>
</head>

<body>
<h1 style="position:relative; z-index:100;"><b class="css">CSS</b><span class="play">play</span></h1>
<h2>experiments with Cascading Style Sheets</h2>

<h3 class="norm">by Stu Nicholls</h3>
<h1>method 1</h1>
<div class="container">
<div class="holder">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="content">
<h2>{width:90%; min-width:400px;} includes IE5.5 and IE6</h2>
<h3>this is the first of two ways that I have found to emulate true min-width in IE and uses an inline-block, a border-width and a negative margin (NO javascript).</h3>
<h4>this div has a min-width of 400px and a width of 90%. You can set the width as any percentage and the min-width as a px or em value.</h4>
<p>discovered 11th May 2005 by Stu Nicholls</p>

</div>

<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
</div>
</div>

<div class="rule"><p>this div is 400px wide and can be used as a guide for min-width.</p></div>
<h1>method 2</h1>
<div class="container2">
<div class="holder2">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="content">
<h2>{width:90%; min-width:400px;} includes IE5.01, IE5.5 and IE6</h2>
<h3>this is the second way that I have found to emulate true min-width in IE and uses float left, a border-width and a negative margin (NO javascript).</h3>

<h4>this div also has a min-width of 400px and a width of 90%. You can set the width as any percentage and the min-width as a px or em value.</h4>

<p>discovered 11th May 2005 by Stu Nicholls</p>
</div>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
</div>
</div>

<p>compliant <a href="http://validator.w3.org/check/referer" title="Valid XHTML 1.1!">xhtml 1.1</a></p>
<p><a href="http://www.cssplay.co.uk/comments/comments.php?comment_id=IE min width" title="please leave your comments here ">leave your comments here</a></p>
<p><a href="../index.html" title="home">home</a></p>

</body>
</html>

Всем спасибо за участие в обсуждении.

Sign In

Ограничение минимальных размеров div

Question

Link to comment

Share on other sites

10 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information