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:auto; property of
css but this brings scroll bar in firefox which i don't want.
Kindly, help as soon as possible.
Thanks,
sameer.