.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" <ge***@newsgroup.nospamwrote in message
news:e$**************@TK2MSFTNGP05.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.dtd">
<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>
