Jump to content
  • 0

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


serzh
 Share

Question

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

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

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

Link to comment
Share on other sites

10 answers to this question

Recommended Posts

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

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

*width:300px;=в IE

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

Link to comment
Share on other sites

  • 0

Наш?л несколько решений для создания аналога 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>

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy