Css boxes text overflows

HTML & CSS
1

Hey,

Take a look at the following page:

http://www.freemanholland.com/cow/public_html/

i am pulling out the boxes from a database, some of which have text, image, and a link the image navigates to, and some of which don’t have text but have a link and an image.

If you notice the first box has text inside .box-content. however i cannot set a width as the boxes are of different widths… what i have had to do is set a min and max width on .box-content. But i can see a problem here where if the smaller boxes have text inside the text will overflow…

How can i fix this so that the .box-content text fits perfectly inside the box, no matter what the size of the box is?

Thanks

2

Thanks Paul,

The text will only ever be in the wider boxes, if you see now, we are uploading boxes with text inside, you can see it is actually working quite nicely :smiley:

http://www.freemanholland.com/cow/public_html/

Thanks again

3

Hi,

As you are absolutely placing the text on top you could use right and left co-ordinates but you’d have to hide the overflow.

e.g.


.box-home{float:left; height: 147px;[B]position:relative[/B]}
.box-content{[B]position:absolute;left:0;right:0;top:0;bottom:0;overflow:hidden[/B]}
[B].box-content p{margin:3px 5px 0 13px;}[/B]

(The above won’t work in IE6 though).

How are you going to make sure that you never have too much text to fit in the space available. It seems a bit of a fragile design?