CSS Forum

**sameer2k** · 07-03-2006, 07:56 AM

Hi,

Please, help me how can I have flexible box with background color in css that will expand according to the contents. Following is the test code that I have used, it is working in IE but in firefox contents come out of the box. I am looking for the cross browser fix for this:-

The CSS File I am using contains the following:-
div#content{margin-left:190px;margin-top:5px;}
div.box
{
width: auto;
min-width: 40px;
border: 2px solid #781351;
padding: 3px;
background: #d7b9c9;

white-space: nowrap
}

following is my html file:-
<html>
<head>
<link href="test.css" rel="stylesheet" type="text/css" media="all" />
<title>TEST PAGE</title>
</head>
<body>
<div id="content">
<div class="box">

<H1>Sam</H1>
<H1>Sam</H1><H1>Sam</H1><H1>Sam</H1><H1>Sam</H1>
<p>The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology </p>
</div>
</div>
</body>
</html>
I know one fix is overflow

; property of css but this brings scroll bar in firefox which i don't want.
Kindly, help as soon as possible.

Thanks,
sameer.

**LadynRed** · 07-03-2006, 12:01 PM

As I replied in the other forum you post this same question to - put display: table-cell; on the .box and it will then expand like a table cell.

Why would you want to do this anyway ?

**sameer2k** · 04:00 AM

Thanks!!! web Mistress, display:table property is working under IE & FireFox. I have one more question, instead of background color & border, if I have one image of rectangle box, can i use this as background.

Please help, how can I make this image flexible to stretch in all browser & adjust according to the content size dynamically. I just wanted the text as it is within this panel, I mean the panel should strech vertically or horizontally, if text size increases.

div#content{margin-left:190px;margin-top:5px;}
div.box
{
width: auto;
min-width: 40px;
padding: 3px;
background: url(images/panel.gif) repeat-x;

white-space: nowrap

}
rest all my code is same.