Stretching a div inside another div

[kjelle392]

Hello

I want to make a rounded corner box with text on the left and a picture on the right.
The box should have a fixed width, but be able to expand vertically.
The picture in the box must also "expand", but in a way that it seems that the picture is "revealed" (so that it is only visible inside the box).

I have made the box with 3 divs; top, middle (which contain the actual text and picture), and a bottom div. All with background-images to make up the rounded cornes). The divs is contained in another div - to
wrap all things up.

Here's the CSS:

#tekstfelt {
 position: relative;
 top: 0px;
 overflow: hidden;
}
#tekstfelt_topp {
 width: 685px;
 height: 7px;
 background: #FFF url(../gfx/tekstfelt_topp.gif) no-repeat 0 0;
 margin: 0;
 padding: 0;
 border: 1px none red;
 overflow: hidden;
}
#tekstfelt_midt {
 width: 685px;
 height: 180px;
 padding-left: 10px;
 background: #00F url(../gfx/tekstfelt_midt.gif) repeat-y 0 0;
}
#tekstfelt_bunn {
 width: 685px;
 height: 18px;
 margin-bottom: 5px;
 background: #FFF url(../gfx/tekstfelt_bunn.gif) no-repeat 0 0;
}
#ingeniorbilde {
 position: absolute;
 top: 0px;
 right: 10px;
 float: right;
 margin-right: 5px;
 width: 150px;
 height: 200px;
 overflow: hidden;
}

... and the HTML:

<div id="tekstfelt">
 <div id="ingeniorbilde"><img src="gfx/fem_eng.gif"></div>
 <div id="tekstfelt_topp"></div>
 <div id="tekstfelt_midt">
  <div class="artikkeltittel">Nulla augue</div>
  <div class="artikkel">
   Nulla augue dolor.....
  </div>
  <div class="artikkeltittel">Quis ipsum</div>
  <div class="artikkel">
   Quis ipsum suscipit ......
  </div>
 </div>
 <div id="tekstfelt_bunn"></div>
</div>

This works great if the text-box' height matches the pictures (200px), but when the box stretches vertically, the picture does not.

What is the best way to get this to work?

Best regards,
Kjell Inge Sandvik

[SuzyUK]

Hi Kjell and Welcome to the Forums!

not sure I get this, is it the background image you want to keep revealing (expand vertically)?

#tekstfelt_midt {
width: 685px;
height: 180px;
padding-left: 10px;
background: #00F url(../gfx/tekstfelt_midt.gif) repeat-y 0 0;
}

the fixed height on that div could be the problem, where when it's getting bigger than 180px it is overflowing the div rather than stretching it, try removing it..

if that's not it let us know

Suzy

[kjelle392]

Thank you very much for your answer Suzy.

The box (made by 3 divs (top/middle/bottom) should contain both text and a graphic. The graphic should only be visible inside the box - but now the bottom of the picture is "floating over" the bottom edge of the box.

The background-images of the box works great.

Best regards,
Kjell Inge Sandvik

[SuzyUK]

Hi Kjell

Ok I think I have some not all of it now.. but we can ignore the background images as they're doing their job right?

Can I give you this CSS to try with that existing HTML, which I've colored to see I've got the rest of it..

#tekstfelt {
position: relative;
top: 0px;
/* overflow: hidden; */ /* this not doing anything as no dimensions specified? */
background: #eee; /* grey added for visual */
}

#tekstfelt_topp {
width: 685px;
height: 7px;
background: #0f0; /*green*/
margin: 0;
padding: 0;
/* border: 1px none red; */
overflow: hidden;
}

#tekstfelt_midt {
width: 675px; /* changed from 685px because of padding */
padding-left: 10px;
height: 180px;
background: #00F; /* blue */
}

#tekstfelt_bunn {
width: 686px;
height: 18px;
margin-bottom: 5px;
background: #0f0; /* green */
}

#ingeniorbilde {
position: absolute;
top: 0px;
right: 10px;
/* float: right; */ /*this cancels position absolute?*/
/* margin-right: 5px; */ /* add to right positioning if required */
width: 150px;
height: 200px;
overflow: hidden;
background: red;
}

I've put some notes beside some of it, they're not necessarily anything to do with your question, just observations as I was going through it..

1. is it the red div (#ingeniorbilde) that you want to make expand as required but never get bigger than 200px
2. should it (red div) be way off to the right like that or is that the graphic that should be in the text box.. ~ the float:right; on that div is in conflict with the absolute positioning..
3. Is the idea that the blue/green textbox area should never be higher than 200px..

LOL, sorry more questions and none of them answering your question ;)

You can't expand/contract/reveal an actual image (well you sort of can but they don't scale well) - I'm trying to clarify what effect you are trying to achieve and if there is another way to do it..

Thanks
Suzy