Css Help Please

[shawzy85]

Hi all,

OK so I am doing a redesign of my site and one element is where I have my content in a rounded box image.

The way I have done it is to have three div, the first is topOfContainer where I have the image of the rounded top. Then the bodyOfContainer where the content is. And bottomOfContainer where it has the image of the bottom.

The problem is the bodyOfContainer, I have to specify how many pixels down it is (about 700 a think). This isn't to much of a problem but it is when you resize the text.

The way I thought to do it would be to tile the image in the y direction then put the size 100% but this doesn't work.

Any help would be greatly appreciated.

link - http://www.griffinwebdesign.co.uk/GriffinNew/index.html

Regards Andy

[Toon]

Using padding with whatever you fill it with will make it expand to the size needed. Enter some text in the centre div and then add padding to the css.

[Toon]

I might be wrong but I had quick look at your code and I couldn't see a container div?

[tommylogic]

Stu Nicholls over at CSSPlay has several solutions for rounded corners using no images for fixed or liquid layouts based on the box model. I prefer the snazzy mehtod.

[shawzy85]

So what do I need to add then Toon, cheers tommy but I need to keep the images so it looks exactly like my photoshop mockup and how it currently look now.

Super fast reply then btw :)

[Toon]

Do you have a container div that everything is in?

[shawzy85]

No toon it is set as a header with the logo and nav, then the content which the container would be the bodyOfContainer which has leftContent and rightContent. Then the footer. So its basically split into three. The bodyOfContainer of container has an image that fits the whole x length with the y lenght tiled which I have set as a pixel amount but doing this means it can't change size. if if use % in the lenght it doesnt work.

Any more questions just ask.

[Toon]

That's why you can't expand the text. When you say 100% it is a % of the container div and everything has to expand together

[shawzy85]

So what should do then.

send me the code i'm lazy ;)

[tommylogic]

if I'm seeing this correctly (not sure of your slicing)... you should use a main wrapper for the entire page, followed by header, innerwrapper (add your content left and right here), and footer.

You should slice so your corner images to go in the innerwrapper (for the top corners) and footer, at its top (for the bottom corners).

This method allows your innerwrapper content to expand as big as it needs to while maintaining your borders and corners at perfect allignment