Hi all!
I have a problem with some divs width.
I have 3 divs. First div (let's name it 'Container') contain the other 2 divs.
The problem is: When the second div have a larger width then 'Container' div I want it to strech. Another problem is that I want the second div and third div to have the same width when one is larger then the fixed (min) width.
I don't know if you can understand what I want to mean but... I hope you will.
| ------------------|
| ---------------------
| |........DIV 2 ...........|
| ---------------------
| ------------........|
| |....DIV 3 ..|........|
| ------------........|
|........DIV 1..........|
|------------------|
I want the div 2 (red) to expand the div 1 (black). Also I want the div 3 (blue) to have the same width like div 2.
Thanks!How about something like:
<style type="text/css" media="screen">
<!--
.box {
min-width: 100%;
}
/* Only for IE-Win, hide from IE5-Mac: \*/
* html .box {
width: 100%;
} /* end hiding from IE5-Mac. */
#container {
min-width: 700px;
}
/* Only for IE-Win, hide from IE5-Mac: \*/
* html #container {
width: 700px;
} /* end hiding from IE5-Mac. */
-->
</style>
</head>
<body>
<div id="container">
<div class="box"></div>
<div class="box"></div>
</div>
Note that IE5-Mac doesn't support the min-width property, nor does it expand elements like IE-Win does. Also, all Safari versions prior to 1.3/2.0 Tiger also do not support the min-width property and do not expand elements with just a width set.Thanks toicontient.
I aprecciate your help!
This do not fix all problem. The container div is extended but not all divs have the same width. The div 3 have the initial container width (in IE6-win). I want it have the div 2 width.
Thanks again for your help!.box3 { width:100%; }
Tada.It does't work... I don't know why... but box3 have the initital width of container box.This code works for me on firefox, but IE-Win still has some issues. So far I can't see of a way to do this, given the crappy browser (<!-- m --><a class="postlink" href="http://www.microsoft.com/windows/ie/">http://www.microsoft.com/windows/ie/</a><!-- m -->) we have to account for. It seems like it should be doable.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Stretch Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
<!--
.box {
background-color: #fcc;
margin: 1em 0;
white-space: nowrap;
width: 100%;
}
html>body .box {
width: auto;
}
#container {
background-color: #ccc;
float: left;
min-width: 700px;
width: 700px;
}
html>body #container {
width: auto;
}
-->
</style>
</head>
<body>
<div id="container">
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="box">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.
</div>
</div>
</body>
</html>Thanks for your help!
Yes your code work in firefox.
The IE have a lot of problems with css... not only this.
Thaks again!
I have a problem with some divs width.
I have 3 divs. First div (let's name it 'Container') contain the other 2 divs.
The problem is: When the second div have a larger width then 'Container' div I want it to strech. Another problem is that I want the second div and third div to have the same width when one is larger then the fixed (min) width.
I don't know if you can understand what I want to mean but... I hope you will.
| ------------------|
| ---------------------
| |........DIV 2 ...........|
| ---------------------
| ------------........|
| |....DIV 3 ..|........|
| ------------........|
|........DIV 1..........|
|------------------|
I want the div 2 (red) to expand the div 1 (black). Also I want the div 3 (blue) to have the same width like div 2.
Thanks!How about something like:
<style type="text/css" media="screen">
<!--
.box {
min-width: 100%;
}
/* Only for IE-Win, hide from IE5-Mac: \*/
* html .box {
width: 100%;
} /* end hiding from IE5-Mac. */
#container {
min-width: 700px;
}
/* Only for IE-Win, hide from IE5-Mac: \*/
* html #container {
width: 700px;
} /* end hiding from IE5-Mac. */
-->
</style>
</head>
<body>
<div id="container">
<div class="box"></div>
<div class="box"></div>
</div>
Note that IE5-Mac doesn't support the min-width property, nor does it expand elements like IE-Win does. Also, all Safari versions prior to 1.3/2.0 Tiger also do not support the min-width property and do not expand elements with just a width set.Thanks toicontient.
I aprecciate your help!
This do not fix all problem. The container div is extended but not all divs have the same width. The div 3 have the initial container width (in IE6-win). I want it have the div 2 width.
Thanks again for your help!.box3 { width:100%; }
Tada.It does't work... I don't know why... but box3 have the initital width of container box.This code works for me on firefox, but IE-Win still has some issues. So far I can't see of a way to do this, given the crappy browser (<!-- m --><a class="postlink" href="http://www.microsoft.com/windows/ie/">http://www.microsoft.com/windows/ie/</a><!-- m -->) we have to account for. It seems like it should be doable.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Stretch Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
<!--
.box {
background-color: #fcc;
margin: 1em 0;
white-space: nowrap;
width: 100%;
}
html>body .box {
width: auto;
}
#container {
background-color: #ccc;
float: left;
min-width: 700px;
width: 700px;
}
html>body #container {
width: auto;
}
-->
</style>
</head>
<body>
<div id="container">
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="box">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.
</div>
</div>
</body>
</html>Thanks for your help!
Yes your code work in firefox.
The IE have a lot of problems with css... not only this.
Thaks again!