Spilling contents from the box in css

Discussion in 'CSS' started by sameer, Jul 3, 2006.

0
  1. #1
    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.
     
    sameer, Jul 3, 2006 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    It's not polite to cross-post on multiple forums. Since you're already being helped there, This thread should be locked to preclude people wasting time on duplicate efforts.

    gary
     
    kk5st, Jul 3, 2006 IP
  3. AdamSee

    AdamSee Well-Known Member

    Messages:
    422
    Likes Received:
    28
    Best Answers:
    0
    Trophy Points:
    135
    #3
    Gary's our resident hero - Nice!
     
    AdamSee, Jul 3, 2006 IP
  4. sameer

    sameer Banned

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    I was in urgent requirement for the answer i.e. why i took the help of all the forums.
     
    sameer, Jul 5, 2006 IP
  5. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #5
    There is a saying, "Poor planning on your part does not constitute an emergency on ours."

    It is still impolite, no matter how important you might have thought it. I saw that Brian was already helping you on Devshed, which is why I suggested the mods here lock this thread, and did why I did lock your thread on CSSCreator.

    Please read this CSSCreator thread for an explanation of why cross-posting is a Bad Thing.

    cheers,

    gary
     
    kk5st, Jul 5, 2006 IP