Forum Moderators: not2easy
thanks in advanced
[edited by: SuzyUK at 7:56 pm (utc) on Aug. 23, 2004]
[edit reason] ooops sorry no URLS per TOS #13 [webmasterworld.com] [/edit]
body {
background:white;
margin:0px;
margin-top: 5px;
margin-left: 5px;
padding:0px;
text-align: center;
height: 100%;
}#caixa{
width: 400px;
}
.esquerda_1{
float: left;
width: 38px;
height: 26px;
background:url(img/q1_1.gif) no-repeat top left;
margin:0px;
margin-right:-3px;
}
html>body .esquerda_1 {
margin-right:0px;
}
.direita_1{
float: right;
width: 38px;
height: 26px;
background:url(img/q1_3_semtitulo.gif) top right;
margin:0px;
margin-left:-3px;
}
html>body .direita_1 {
margin-left:0px;
}
.meio_titulo{
width: 100%;
height: 26px;
background:url(img/q1_2_shin.gif) repeat-x;
}
.esquerda_2{
float: left;
width: 4px;
height: 100%;
background:url(img/q2_1_shin.gif) repeat-y top left;
margin:0px;
margin-right:-3px;
}
html>body .esquerda_2 {
margin-right:0px;
}
.direita_2{
float: right;
width: 4px;
height: 100%;
background:url(img/q2_2_shin.gif) repeat-y top right;
margin:0px;
margin-left:-3px;
}
html>body .direita_2 {
margin-left:0px;
}
.meio{
width: 100%;
background:url(img/q2_bg.gif) repeat;
}
.esquerda_3{
float: left;
width: 6px;
background:url(img/q3_1.gif) no-repeat;
margin:0px;
margin-right:-3px;
}
html>body .esquerda_3 {
margin-right:0px;
}
.direita_3{
float: right;
width: 6px;
background:url(img/q3_3.gif) no-repeat;
margin:0px;
margin-left:-3px;
}
html>body .direita_3 {
margin-left:0px;
}
.meio_rodape{
width: 100%;
background:url(img/q3_2_shin.gif) repeat-x;
}
</style>
</head>
<body>
<br /><br />
<div id="caixa">
<div class="esquerda_1"> </div>
<div class="direita_1"> </div>
<div class="meio_titulo">aasdfsadfasd </div>
<div class="esquerda_2"> </div>
<div class="direita_2"> </div>
<div class="meio">
aasdfsadfasd aqui bla bla <br /> aqui bla bla<br /> bubu sdlkfjs dk<br /> alkakl WOWOWOW
</div>
<div class="esquerda_3"> </div><div class="direita_3"> </div><div class="meio_rodape"> </div>
</div>
the two sides of the middle part of your box won't stretch to 100% of the content height as they're floats and are removed from the flow. (same problem as full column strecth questions) or they need an explicit height set on the parent like you mentioned, but don't want..
As your box is a fixed width, one solution would be to remove the two side floats and just make a 400px wide graphic which has the left and right borders and background color built into it.. (I presume that it's graphic borders that you are trying to get to stretch?)
Then make that image the background to the main div
I've redone it with colors as we can't see your images..
body {
background:white;
margin:0px;
margin-top: 5px;
margin-left: 5px;
padding:0px;
text-align: center;
height: 100%;
}#caixa{
width: 400px;
margin: 0 auto;
}/* top left corner */
.esquerda_1{
float: left;
width: 38px;
height: 26px;
background: #fcf;
margin:0px;
margin-right:-3px;
}html>body .esquerda_1 {
margin-right:0px;
}.direita_1{
float: right;
width: 38px;
height: 26px;
background: #fcf;
margin:0px;
margin-left:-3px;
}html>body .direita_1 {
margin-left:0px;
}.meio_titulo{
width: 100%;
height: 26px;
background: #cfc;
}.meio{
width: 400px;
background: yellow;
/* make 400px wide graphic here with "both side borders" and put it as background image set to repeat-y */
}.esquerda_3{
float: left;
width: 6px;
background: #fcf;
margin:0px;
margin-right:-3px;
}html>body .esquerda_3 {
margin-right:0px;
}.direita_3{
float: right;
width: 6px;
background: #fcf;
margin:0px;
margin-left:-3px;
}html>body .direita_3 {
margin-left:0px;
}.meio_rodape{
width: 100%;
background: red;
}</style>
</head>
<body>
<div id="caixa">
<div class="esquerda_1"> </div>
<div class="direita_1"> </div>
<div class="meio_titulo">aasdfsadfasd </div>
<div class="meio">
aasdfsadfasd aqui bla bla <br /> aqui bla bla<br /> bubu sdlkfjs dk<br /> alkakl WOWOWOW
</div>
<div class="esquerda_3"> </div><div class="direita_3"> </div><div class="meio_rodape"> </div>
</div>
is that what you're after or have I misunderstood?
Suzy
