Minimize mark up & Liquid boxes

[zackattack]

Hi

Description:

I am trying to minimize my mark up whilst creating a nice box with shadow and a graphic in the top right of the box. The box is a class DIV as I am using more than one on the page and swapping titles and images by using another class. so far I have the top right and left corners in and the left and right sides.

I have tried to use all the hooks I can already available in the mark up. I still need to add the bottom left and right corners and bottom line (all with shadows)

1) These boxes need to be liquid

2) Needs to be as least amount of extra markup or empty divs as possible

3) Need to be able to put an image in with float and not blow the box apart

HTML:

<div class="box corner">
<h2 id="flower">Description</h2>
<p><img src="big-bucket.jpg" class="picture">Ut wisi enim ad minim veniam.......</p>
<p>more text.. </p>
</div>

CSS:

.box {
margin: 0 0 0 0;
padding: 17px 0 0 0;
background-color: #fff;
}
.box h2 {
margin: 0 40px 0 0;
padding: 0 0 0 0;
background-color: #fff;
}
#flower { /* assign differnt image to each h2 in each box*/
height: 20px;
text-indent: -5000px;
background: url(images-design/description.gif) no-repeat;
}
.box p {
margin: 0 0 0 0;
padding: 7px 10px 0 10px;
background: transparent url(images-design/line-right.gif) 100% 0 repeat-y;
border-left: solid 1px #06c;
}
.corner {
background: #fff url(images-design/top-right.gif) 100% 0 no-repeat;
}
.picture {
float: left;
margin: 0 10px 5px 0;
border: inset 1px;
}

I did think about putting in a box-bottom div but its not going to have any content in it - I have been looking at this for ages now...

can anyone shed any light?

ZA

[zackattack]

OK ok I read re-read and read again and yes I finally got this whole thing to work quite elegantly, based on and using the first link you sent me - not without some frustration to begin with, I swear it makes the feeling of succeeding so much better - the pain the hurt the frustration, CSS is a wicked and hard slave driver, who eventually shows kindness and makes you feel great..oh...crikey..! need to get out more :-)

I had seen both these articles before, but never needed them at the time.. thank you so much for your help

for fluid expandable boxes made with lovely graphics this first link to ALA is a very good resource.

I can post my completed code if anyone is interested..

ZA

[edited by: createErrorMsg at 9:47 pm (utc) on June 20, 2005]
[edit reason] cleaning [/edit]