Div width problem

NiKnight · October 12th, 2006, 08:00 PM

Hey everyone
im having a problem with the width of my main (content) div. when i add text it expands with the text (instead of automaticly going down a line) although i have placed a width: property.
currently the width is set to auto however when a fixed number (Xpx) is placed it still happens, however overflow:scroll elimates the overlapping but adds a yucky scroll bar.
any ideas?
code:
html:

Code:

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 <head>
  <meta http-equiv="Content-type" content="text/html;
 charset=iso-8859-1" />
  <meta http-equiv="Content-Language" content="en-us" />
  <link href="hodvehadarstyle.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
  <div class="box">
  <div class="header"></div>
  <div class="contentarea">
   <div class="menucont">
 
   </div>
   <div class="right">
   </div> 
   <div id="content">
     <p> 
   </div>
  </div>
  </div>
 
</body>
</html

css (i excluded hyperlink related style to save room)

Code:

*{margin: 0px; padding: 0px;}
body{
 background-color: #dddbcd;
 font-size: xx-small;
 font-family: "Lucida Sans", serif;
 background-image: url('bg.jpg');
 background-repeat: repeat-y;
} 
div.box{
 position: relative;
 
 width: 750px;
 max-width: 750px;
 text-align: left;
 
 color: #737373;;
}
div.header{
 width: 750px;
 height: 150px;
 
 background-image: url('header.jpg');
 background-repeat: no-repeat;
}
div.contentarea{
 position: relative;
 width: 750px;
 max-width: 750px;
 height: 800px;
 
}
div.menucont{
 position: absolute;
 top: 0px;
 left: 0px;
 width: 115px;
 height: 100%;
 margin-top: 5pt;
 text-align: center;
 margin-left: 30px;
}
div.right{
 position: absolute;
 right: 0px;
 top: 0px;
 width: 150px;
 height: 100px;
 text-align: center;
 margin-top: 5pt;
 margin-right: 30px;
 font-family: sans-serif;
 font-size: small;
}
#content{
 width: auto; 
             margin: 6pt 185px 0 150px;
 font-family: sans-serif;
 font-size: medium;
 color: inherit;
 height: 75%;
 overflow: scroll;
 
}

Ryan Fait · October 13th, 2006, 07:24 PM

It'd be helpful to see this in action. From looking at your code, though, it looks like it may be a positioning problem.