CSS Width problem

I'd like to create a div that has the same width as the text's length inside it. I can do it without problem when the div is inside a DOM element that has enough width to fit the text in. But when I put my text holder div inside another div that is not wide enough the text will be fractioned into lines even if I set the text holder div's max height and the container div's overflow to visible.

Here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;

<html>
  <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

 <style type="text/css">
   body{
    background: #c0c0c0;
   }

   #wrapper{
    margin: auto;
    width: 200px;
    height: 300px;
    border: 1px solid yellow;
    overflow: visible;
   }

    .text{
     display: inline;
     min-width: 200px;
     max-height: 19px;
     line-height: 19px;
     font-size: 19px;
     background: red;
    } 
 </style>
  </head>

  <body>
  <div id="wrapper">
   <div class="text"> dugasu dauisghdu iasgudgu asgduig ausdgui gasuidg iasugdui asd</div>
  </div>

  <div class="text"> dugasu dauisghdu iasgudgu asgduig ausdgui gasuidg iasugdui asd</div>
  </body>
</html>

Here's a picture of that: http://i36.tinypic.com/331ix53.png

I'd like the text inside the "wrapper" DOM element to be in ONE line like the text outside it (and of course to be overflowed)

ansaurus

tags:

views:

answers:

CSS Width problem

related questions