for anyone interested I did find a solution :
.outer
{
float:left;
border:solid 1px black;
overflow:hidden :
}
.full
{
height:6px;
padding-right:2000px;
margin-right:-2000px;
background-color:Blue;
}
and for a similar horizontal layout :
.outer
{
float:left;
border:solid 1px black;
overflow:hidden :
}
.full
{
float:left;
width:60px;
min-height:1px; /* moz - without this float:left divs to the right
cover this one */
padding-bottom:1000px;
margin-bottom:-1000px;
background-color:Blue;
}
.fixed
{
float:left;
width:100px;
height:100px;
background-color:Gray;
}
I realize that the effect of
div { padding:2px; margin:2px; border:solid 2px red; }
is messed up , but I don't care - this is only there for testing so I could
see exactly where the divs were.
"gerry" <germ2@newsgrou p.nospamwrote in message
news:e$3AjjqRJH A.4992@TK2MSFTN GP05.phx.gbl...
.outer
{
float:left;
border:solid 1px black;
overflow:hidden :
}
.full
{
height:6px;
padding-right:2000px;
margin-right:-2000px;
background-color:Blue;
}
and for a similar horizontal layout :
.outer
{
float:left;
border:solid 1px black;
overflow:hidden :
}
.full
{
float:left;
width:60px;
min-height:1px; /* moz - without this float:left divs to the right
cover this one */
padding-bottom:1000px;
margin-bottom:-1000px;
background-color:Blue;
}
.fixed
{
float:left;
width:100px;
height:100px;
background-color:Gray;
}
I realize that the effect of
div { padding:2px; margin:2px; border:solid 2px red; }
is messed up , but I don't care - this is only there for testing so I could
see exactly where the divs were.
"gerry" <germ2@newsgrou p.nospamwrote in message
news:e$3AjjqRJH A.4992@TK2MSFTN GP05.phx.gbl...
>I am trying to create a division that contains 2 other types of divisions.
The 1st type of inner division is a fixed width division that the outer
division should shrink to fit.
The 2nd type of inner division should fill the width of the outer at its
'shrunk' size.
>
The following markup & css does what I want in firefox ( 3.04 ) & opera
( 9.62 ) but not in iexplorer ( 7 ) .
The attached shows the rendering by ff & ie.
In all browsers the outer division shrinks to the size of the fixed width
inner type 1 divisions as required.
In ff & opera the type 2 inner divisions expand to the width of the outer
division as required but in ie they do not.
>
It seems to me that FF/OP are the browsers rendering this correctly -
please correct me if I am wrong.
How do I get IE to render this the same way that the other 2 do ?
>
>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style type="text/css">
body { height:100%; padding:0px; margin:0px; }
div { padding:2px; margin:2px; border:solid 2px red; }
.outer
{
float:left;
border:solid 1px black;
}
.fixed
{
height:100px;
width:100px;
background-color:Gray;
}
.full
{
height:6px;
width:auto;
background-color:Blue;
}
.w1 { width:100px }
.w2 { width:150px }
</style>
</head>
<body>
<div class='outer'>
<div class='full'></div>
<div class='fixed w1'></div>
<div class='full'></div>
<div class='fixed w2'></div>
<div class='full'></div>
</div>
</body>
</html>
>
>
The 1st type of inner division is a fixed width division that the outer
division should shrink to fit.
The 2nd type of inner division should fill the width of the outer at its
'shrunk' size.
>
The following markup & css does what I want in firefox ( 3.04 ) & opera
( 9.62 ) but not in iexplorer ( 7 ) .
The attached shows the rendering by ff & ie.
In all browsers the outer division shrinks to the size of the fixed width
inner type 1 divisions as required.
In ff & opera the type 2 inner divisions expand to the width of the outer
division as required but in ie they do not.
>
It seems to me that FF/OP are the browsers rendering this correctly -
please correct me if I am wrong.
How do I get IE to render this the same way that the other 2 do ?
>
>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style type="text/css">
body { height:100%; padding:0px; margin:0px; }
div { padding:2px; margin:2px; border:solid 2px red; }
.outer
{
float:left;
border:solid 1px black;
}
.fixed
{
height:100px;
width:100px;
background-color:Gray;
}
.full
{
height:6px;
width:auto;
background-color:Blue;
}
.w1 { width:100px }
.w2 { width:150px }
</style>
</head>
<body>
<div class='outer'>
<div class='full'></div>
<div class='fixed w1'></div>
<div class='full'></div>
<div class='fixed w2'></div>
<div class='full'></div>
</div>
</body>
</html>
>
>