How to make content fit in DIV

[gnawz]

#pagecontent {
  max-width:490px;
  max-height: 240px;
  position: absolute;
  color: #fff;
  top: 115px;
  left: 378px;
  border: 3px solid white;
  background: #901315;
  padding: 0px;
}

How do I make sure data/test displayed in this div automatically goes to a new line as opposed to exceeding/overflowing in the <div>?

I have tried the overflow and display properties but can,t make it.

Your help will be much appreciated

[prabirchoudhury]

dont set

max-height: 240px;

, then if your document bigger then that height length it would overflow the <div> , better to set

min-height: 240px;

then it would take minimum that height and max whatever it comes

[gnawz]

That does not seem to work.

Any other ideas?

[drhowarddrfine]

That should work but min-height does not work in IE6.

[gnawz]

I'm using Mozilla. the content still overflows the div

[drhowarddrfine]

So am I. Need to see the complete markup then cause I don't see the problem.

[gnawz]

My CSS

#content {
  min-width:490px;
  min-height: 240px;
  position: absolute;
  color: #fff;
  top: 115px;
  left: 378px;
  border: 3px solid white;
  background: #901315;
  padding: 0px;
}
 

The page where I display the content

<?
//require_once'functions.php';
require_once'template.php';
 
Head('Frequently asked questions');
?>
 
<table align="center">
  <tr>
    <td><div id="content">wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
    wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</div></td>
  </tr>
</table>
 
 
 
 
<?
Footer();
?>
 

[drhowarddrfine]

I still don't see the problem. Do you mean you are wondering why it's not staying inside the table cell? Absolutely positioned elements are removed from the normal flow and that would be why you don't see it inside the table cell itself but it is staying inside the div.

[gnawz]

Thank you very much.

Had over looked that.

However, the div now respects the sizing in CSS but not all content is displayed, ie I expected content to be moving to a new line in succession until it all fits.

What is the issue here?

My other small issue is that my menus appear to be larger, ie not following the CSS style correctly.On my index page, they are okay.
What could be the problem?

[drhowarddrfine]

You have to show an example. Show the complete markup. By complete, I mean everything from line1 to the last line.

[gnawz]

This is my entire CSS

html, body, ul, li, h1, h2, h3, h4 {
    margin: 0px;
    padding: 0px;
    color: #DBDBDB;
    list-style: none;
}
 
h1 img {
    display: block;
}
img {
    border: 0px;
}
p {
    margin: 0.5em 0px;
}
a {
    color: white;
    text-decoration: none;
}
a:hover {
    color: #eee;
    text-decoration: underline;
}
.left {
    float: left;
}
.right {
    float: right;
}
.more {
    text-align: right;
}
.clear {
    clear: both;
}
 
body {
    background: #580000 url(images/header_bg.jpg) repeat-x;
    font: 11px arial, sans-serif;
    padding-bottom: 10px;
} 
#header {
    position: absolute;
    top: 5px;
    left: 160px;
    width: 100%;
    height: 27px;
}
 
#header h1 {
    background:url(images/header_left.jpg) no-repeat;
    height: 184px;
    width: 282px;
    margin: 0;
    padding: 0;
    color: #fff;
    line-height: 1;
}
#header h1 em {
    display: block;
    padding: 30px 0 0 60px;
    margin: 0;
    font-size: 18px;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;
}
 
#headerright {
    position: absolute;
    top: 5px;
    left: 920px;
    width: 100%;
    height: 200px;
}
 
#headerright h1 {
    background:url(images/header_left.jpg) no-repeat;
    height: 184px;
    width: 282px;
    margin: 0;
    padding: 0;
    color: #fff;
    line-height: 1;
}
#headerright h1 em {
    display: block;
    padding: 30px 0 0 60px;
    margin: 0;
    font-size: 18px;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;
}
#headerright h1 strong {
    display: block;
    margin: 0px;
    padding: 10px 0px 0px 50px;
    font-weight: bold;
    font-size: 15px;
    font-family: verdana, arial, sans-serif;
}
 
#nav-top {
    position: absolute;
    top: 15px;
    left: 545px;
    width: 200px;
}
#nav-top li {
    display: inline;
}
 
#nav {
    background: top left url(images/nav_left.gif) no-repeat;
    position: absolute;
    top: 40px;
    left: 385px;
    width: 480px;
    text-align: center;
    z-index: 15;
}
#nav div {
    background: top right url(images/nav_right.gif) no-repeat;
    padding: 0 10px;
}
#nav ul {
    background: top left url(images/nav_bg.gif) repeat-x;
    padding: 10px 0 10px 0px;
}
#nav li {
    display: inline;
}
#nav a {
    font-weight: normal;
}
 
#left-person img{
    width: 232px;
    height: 515px;
    border: 3px solid white;
}
 
#right-person img {
    width: 232px;
    height: 515px;
    border: 3px solid white;
}
 
#black-tl { width: 100%; background: black top left url(images/black_tl.gif) no-repeat; }
#black-tr { width: 100%; background: top right url(images/black_tr.gif) no-repeat; }
#black-bl { width: 100%; background: bottom left url(images/black_bl.gif) no-repeat; }
#black-br { width: 100%; background: bottom right url(images/black_br.gif) no-repeat; }
 
#black-tl {
    margin-left: 5px;
    margin-right: 15px;
    margin-top: 0px;
    margin-bottom: 90px;
    width: 500px;
}
#black-bl {
    padding: 20px 20px 10px 20px;
    position: relative;
}
 
.black-box {
    float: left;
    width: 126px;
    margin-right: 5px;
    margin-left: 28px;
}
 
.black-box img {
    width: 120px;
    height: 105px;
    }
.black-box h2 {
    font-size: 13px;
    font-weight: normal;
}
.black-box h2 em {
    font-size: 22px;
    font-family: serif;
}
.black-box .more {
    color: red;
}
 
#footer {
    margin-left: 320px;
    width: 300px;
    position:absolute;
    top: 665px;
    left: 200px;
}
 
#footer li {
    display: inline;
}
 
 
#s {
    position: relative;
    top: 0.4em;
}
#submit {
    position: relative;
    top: 0.2em;
}
 
#content {
  width: 490px;
  height: 240px;
  color: #fff;
  top: 115px;
  left: 381px;
  border: 3px solid white;
  background: #901315;
  padding: 0px;
}
 
#pgcontent {
  float:left;
  width: 490px;
  height: 240px;
  color: #fff;
  top: 115px;
  left: 381px;
  border: 3px solid white;
  background: #901315;
  padding: 0px;
}
 
#tips {
    float: left;
    width: 235px;
    height: 260px;
    position: absolute;
      color: #fff;
      top: 370px;
      left: 381px;
      border: 3px solid white;
      background: #901315;
      padding: 0px;
}
#choose {
    float: left;
    width: 235px;
    height: 260px;
    position: absolute;
      color: #fff;
      top: 370px;
      left: 636px;
      border: 3px solid white;
      background: #901315;
      padding: 0px;
}
 
 
 

this is my template page

<?
header("Pragma: no-cache");
header("Cache: no-cache");
 
function Head($PageTitle)
{
print "<title>".$PageTitle."</title>";
 
 
?>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>LAVIS - CASUAL</title>
    <link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />
 
    <link rel="shortcut icon" href="favicon.gif">
</head>
<script type="text/javascript" src="transitionshow.js">
 
/***********************************************
* Random Transitions Slideshow- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code
***********************************************/
 
</script>
<body>
<script>
<!--
/*
Background music script
By JavaScript Kit (http://javascriptkit.com)
Over 400+ free scripts here!
*/
 
//specify FULL path to midi
var musicsrc="http://localhost/lavis/NicolaBoschetti_GiochiDiLuce.mp4"
if (navigator.appName=="Microsoft Internet Explorer")
document.write('<bgsound src='+'"'+musicsrc+'"'+' loop="infinite">')
else 
document.write('<embed src=\"'+musicsrc+'\" hidden="true" border="0" width="20" height="20" autostart="true" loop="true">')
//-->
</script>
 
<script type="text/javascript" src="ajaxNavigation.js"></script>
 
<table width="1000" height="650"border="0" align="center">
  <tr>
    <td width="250"><table width="250" height="105" border="0" valign = "top">
      <tr>
        <td><div id="header">
            <h1><em>LAVIS</em></h1>
        </div></td>
      </tr>
    </table>
    <table width="250" border="0">
        <tr>
          <td><script type="text/javascript">
 
var flashyshow=new flashyslideshow({ //create instance of slideshow
    wrapperid: "left-person", //unique ID for this slideshow
    //wrapperclass: "flashclass", //desired CSS class for this slideshow
    imagearray: [
        ["compimg/lavis.jpg", "", "", ""],
        ["compimg/lavis (1).jpg", "", "", ""],
        ["compimg/lavis (2).jpg", "", "", ""],
        ["compimg/lavis (3).jpg", "", "", ""],
    ],
    pause: 3000, //pause between content change (millisec)
    transduration: 8000 //duration of transition (affects only IE users)
})
</script></td>
        </tr>
      </table></td>
    <td width="500"><table width="500" border="0">
      <tr>
        <td><div id="nav-top">
            <ul>
              <li><a href="#">Contacts</a> |</li>
              <li><a href="#">Feedback</a> |</li>
              <li><a href="#">FAQS</a> |</li>
              <li><a href="#">Site Map</a></li>
            </ul>
        </div>
            <div id="nav">
              <div>
                <ul>
                  <li><a href="#">HOME</a> &nbsp;|&nbsp;</li>
                  <li><a href="#">ACCESSORIES</a> &nbsp;|&nbsp;</li>
                  <li><a href="#">MEN COLLECTION</a> &nbsp;|&nbsp;</li>
                  <li><a href="#">WOMEN COLLECTION</a> &nbsp;|&nbsp;</li>
                  <li><a href="#">KIDS COLLECTION</a></li>
                </ul>
              </div>
            </div></td>
      </tr>
      <tr>
        <td> 
                <div class="clear"></div>    
</div></td>
      </tr>
      <tr>
        <td>
<?
}
?>
 
<?
function Footer()
{
?>    </td>
        </tr>
    </table>
 
 
 
</td>
    <td width="250"><table width="250" border="0" height="105" valign = "top">
      <tr>
        <td><div id="headerright">
    <h1><em>CASUAL</em><strong>collections</strong></h1>
</div></td>
      </tr>
    </table>
      <table width="250" border="0">
        <tr>
          <td><script type="text/javascript">
 
var flashyshow=new flashyslideshow({ //create instance of slideshow
    wrapperid: "right-person", //unique ID for this slideshow
    //wrapperclass: "flashclass", //desired CSS class for this slideshow
    imagearray: [
        ["compimg/lavis.jpg", "", "", ""],
        ["compimg/lavis (1).jpg", "", "", ""],
        ["compimg/lavis (2).jpg", "", "", ""],
        ["compimg/lavis (3).jpg", "", "", ""],
    ],
    pause: 5000, //pause between content change (millisec)
    transduration: 10000 //duration of transition (affects only IE users)
})
</script>
 
</td>
        </tr>
      </table></td>
  </tr>
</table>
 
<table width="1000" border="0" align="center">
  <tr>
    <td>
    <div class="clear"></div>
    <hr color="#00FF00" align="center">
<div id="footer">
            <ul>
              <li><a href="#">Contacts</a> |</li>
              <li><a href="#">Feedback</a> |</li>
              <li><a href="#">FAQS</a> |</li>
              <li><a href="#">Site Map</a></li>
              <li>&nbsp;&nbsp;&nbsp;&nbsp;&copy;<? echo date("Y"); ?></li>
            </ul>
        </div></td>
  </tr>
</table>
</body>
</html>
<?
}
?>
 

A pape (FAQs) where I use template

<?
//require_once'functions.php';
require_once'template.php';
 
Head('Frequently asked questions');
?>
 
<table align="center">
  <tr>
    <td><div id="pgcontent">
      <p>wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww555555555555555555555</p>
      <p>yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</p>
      <p>yyyyyyyyyyyyyyyyyy      </p>
    </div></td>
  </tr>
</table>
 
 
 
 
<?
Footer();
?>
 
My links, governed by the css "header" and those in the footer do not come out clearly like they do in the index page.
 
they appear larger and distorted.
 
Also, the div area now fits the content area but the information still overflows
 
Your help will be highly appreciated.
 

[drhowarddrfine]

A few things:

1) Never use tables for layout. Always use CSS. In fact, it's been so long since I've messed with tables for layout I find it difficult to debug and frequently won't bother.
2) New web pages have no use for the transitional doctype. Use this one:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 

3) Always show the generated markup and never the PHP. It just clutters things up and means nothing to those of us who don't use it and sometimes forces us to interpret it (which I won't do). It looks like I don't need it to follow along, though.
4) <script> before the <body> must be within the <head>.
5) Validate your html for that list of errors.

More later when I can look at this.

[gnawz]

I added the tables because i though I would be able to control overflow (my current problem)).

I have validated my HTML

Kindly ignore the PHP

I really appreciate your help

[drhowarddrfine]

Ok but now you need to show the corrected html.

[gnawz]

I managed to fix the content in div problem using white space wrap