469,282 Members | 1,704 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,282 developers. It's quick & easy.

How to make content fit in DIV

64
Expand|Select|Wrap|Line Numbers
  1. #pagecontent {
  2.   max-width:490px;
  3.   max-height: 240px;
  4.   position: absolute;
  5.   color: #fff;
  6.   top: 115px;
  7.   left: 378px;
  8.   border: 3px solid white;
  9.   background: #901315;
  10.   padding: 0px;
  11. }
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
May 19 '09 #1
14 22761
prabirchoudhury
162 100+
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
May 21 '09 #2
gnawz
64
That does not seem to work.

Any other ideas?
May 21 '09 #3
drhowarddrfine
7,435 Expert 4TB
That should work but min-height does not work in IE6.
May 21 '09 #4
gnawz
64
I'm using Mozilla. the content still overflows the div
May 21 '09 #5
drhowarddrfine
7,435 Expert 4TB
So am I. Need to see the complete markup then cause I don't see the problem.
May 21 '09 #6
gnawz
64
My CSS

Expand|Select|Wrap|Line Numbers
  1. #content {
  2.   min-width:490px;
  3.   min-height: 240px;
  4.   position: absolute;
  5.   color: #fff;
  6.   top: 115px;
  7.   left: 378px;
  8.   border: 3px solid white;
  9.   background: #901315;
  10.   padding: 0px;
  11. }
  12.  

The page where I display the content

Expand|Select|Wrap|Line Numbers
  1. <?
  2. //require_once'functions.php';
  3. require_once'template.php';
  4.  
  5. Head('Frequently asked questions');
  6. ?>
  7.  
  8. <table align="center">
  9.   <tr>
  10.     <td><div id="content">wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
  11.     wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</div></td>
  12.   </tr>
  13. </table>
  14.  
  15.  
  16.  
  17.  
  18. <?
  19. Footer();
  20. ?>
  21.  
May 21 '09 #7
drhowarddrfine
7,435 Expert 4TB
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.
May 22 '09 #8
gnawz
64
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?
May 22 '09 #9
drhowarddrfine
7,435 Expert 4TB
You have to show an example. Show the complete markup. By complete, I mean everything from line1 to the last line.
May 22 '09 #10
gnawz
64
This is my entire CSS

Expand|Select|Wrap|Line Numbers
  1. html, body, ul, li, h1, h2, h3, h4 {
  2.     margin: 0px;
  3.     padding: 0px;
  4.     color: #DBDBDB;
  5.     list-style: none;
  6. }
  7.  
  8. h1 img {
  9.     display: block;
  10. }
  11. img {
  12.     border: 0px;
  13. }
  14. p {
  15.     margin: 0.5em 0px;
  16. }
  17. a {
  18.     color: white;
  19.     text-decoration: none;
  20. }
  21. a:hover {
  22.     color: #eee;
  23.     text-decoration: underline;
  24. }
  25. .left {
  26.     float: left;
  27. }
  28. .right {
  29.     float: right;
  30. }
  31. .more {
  32.     text-align: right;
  33. }
  34. .clear {
  35.     clear: both;
  36. }
  37.  
  38. body {
  39.     background: #580000 url(images/header_bg.jpg) repeat-x;
  40.     font: 11px arial, sans-serif;
  41.     padding-bottom: 10px;
  42. #header {
  43.     position: absolute;
  44.     top: 5px;
  45.     left: 160px;
  46.     width: 100%;
  47.     height: 27px;
  48. }
  49.  
  50. #header h1 {
  51.     background:url(images/header_left.jpg) no-repeat;
  52.     height: 184px;
  53.     width: 282px;
  54.     margin: 0;
  55.     padding: 0;
  56.     color: #fff;
  57.     line-height: 1;
  58. }
  59. #header h1 em {
  60.     display: block;
  61.     padding: 30px 0 0 60px;
  62.     margin: 0;
  63.     font-size: 18px;
  64.     font-weight:bold;
  65.     font-family:Arial, Helvetica, sans-serif;
  66. }
  67.  
  68. #headerright {
  69.     position: absolute;
  70.     top: 5px;
  71.     left: 920px;
  72.     width: 100%;
  73.     height: 200px;
  74. }
  75.  
  76. #headerright h1 {
  77.     background:url(images/header_left.jpg) no-repeat;
  78.     height: 184px;
  79.     width: 282px;
  80.     margin: 0;
  81.     padding: 0;
  82.     color: #fff;
  83.     line-height: 1;
  84. }
  85. #headerright h1 em {
  86.     display: block;
  87.     padding: 30px 0 0 60px;
  88.     margin: 0;
  89.     font-size: 18px;
  90.     font-weight:bold;
  91.     font-family:Arial, Helvetica, sans-serif;
  92. }
  93. #headerright h1 strong {
  94.     display: block;
  95.     margin: 0px;
  96.     padding: 10px 0px 0px 50px;
  97.     font-weight: bold;
  98.     font-size: 15px;
  99.     font-family: verdana, arial, sans-serif;
  100. }
  101.  
  102. #nav-top {
  103.     position: absolute;
  104.     top: 15px;
  105.     left: 545px;
  106.     width: 200px;
  107. }
  108. #nav-top li {
  109.     display: inline;
  110. }
  111.  
  112. #nav {
  113.     background: top left url(images/nav_left.gif) no-repeat;
  114.     position: absolute;
  115.     top: 40px;
  116.     left: 385px;
  117.     width: 480px;
  118.     text-align: center;
  119.     z-index: 15;
  120. }
  121. #nav div {
  122.     background: top right url(images/nav_right.gif) no-repeat;
  123.     padding: 0 10px;
  124. }
  125. #nav ul {
  126.     background: top left url(images/nav_bg.gif) repeat-x;
  127.     padding: 10px 0 10px 0px;
  128. }
  129. #nav li {
  130.     display: inline;
  131. }
  132. #nav a {
  133.     font-weight: normal;
  134. }
  135.  
  136. #left-person img{
  137.     width: 232px;
  138.     height: 515px;
  139.     border: 3px solid white;
  140. }
  141.  
  142. #right-person img {
  143.     width: 232px;
  144.     height: 515px;
  145.     border: 3px solid white;
  146. }
  147.  
  148. #black-tl { width: 100%; background: black top left url(images/black_tl.gif) no-repeat; }
  149. #black-tr { width: 100%; background: top right url(images/black_tr.gif) no-repeat; }
  150. #black-bl { width: 100%; background: bottom left url(images/black_bl.gif) no-repeat; }
  151. #black-br { width: 100%; background: bottom right url(images/black_br.gif) no-repeat; }
  152.  
  153. #black-tl {
  154.     margin-left: 5px;
  155.     margin-right: 15px;
  156.     margin-top: 0px;
  157.     margin-bottom: 90px;
  158.     width: 500px;
  159. }
  160. #black-bl {
  161.     padding: 20px 20px 10px 20px;
  162.     position: relative;
  163. }
  164.  
  165. .black-box {
  166.     float: left;
  167.     width: 126px;
  168.     margin-right: 5px;
  169.     margin-left: 28px;
  170. }
  171.  
  172. .black-box img {
  173.     width: 120px;
  174.     height: 105px;
  175.     }
  176. .black-box h2 {
  177.     font-size: 13px;
  178.     font-weight: normal;
  179. }
  180. .black-box h2 em {
  181.     font-size: 22px;
  182.     font-family: serif;
  183. }
  184. .black-box .more {
  185.     color: red;
  186. }
  187.  
  188. #footer {
  189.     margin-left: 320px;
  190.     width: 300px;
  191.     position:absolute;
  192.     top: 665px;
  193.     left: 200px;
  194. }
  195.  
  196. #footer li {
  197.     display: inline;
  198. }
  199.  
  200.  
  201. #s {
  202.     position: relative;
  203.     top: 0.4em;
  204. }
  205. #submit {
  206.     position: relative;
  207.     top: 0.2em;
  208. }
  209.  
  210. #content {
  211.   width: 490px;
  212.   height: 240px;
  213.   color: #fff;
  214.   top: 115px;
  215.   left: 381px;
  216.   border: 3px solid white;
  217.   background: #901315;
  218.   padding: 0px;
  219. }
  220.  
  221. #pgcontent {
  222.   float:left;
  223.   width: 490px;
  224.   height: 240px;
  225.   color: #fff;
  226.   top: 115px;
  227.   left: 381px;
  228.   border: 3px solid white;
  229.   background: #901315;
  230.   padding: 0px;
  231. }
  232.  
  233. #tips {
  234.     float: left;
  235.     width: 235px;
  236.     height: 260px;
  237.     position: absolute;
  238.       color: #fff;
  239.       top: 370px;
  240.       left: 381px;
  241.       border: 3px solid white;
  242.       background: #901315;
  243.       padding: 0px;
  244. }
  245. #choose {
  246.     float: left;
  247.     width: 235px;
  248.     height: 260px;
  249.     position: absolute;
  250.       color: #fff;
  251.       top: 370px;
  252.       left: 636px;
  253.       border: 3px solid white;
  254.       background: #901315;
  255.       padding: 0px;
  256. }
  257.  
  258.  
  259.  
this is my template page

Expand|Select|Wrap|Line Numbers
  1. <?
  2. header("Pragma: no-cache");
  3. header("Cache: no-cache");
  4.  
  5. function Head($PageTitle)
  6. {
  7. print "<title>".$PageTitle."</title>";
  8.  
  9.  
  10. ?>
  11.  
  12. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  13. <html>
  14. <head>
  15. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  16.     <title>LAVIS - CASUAL</title>
  17.     <link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />
  18.  
  19.     <link rel="shortcut icon" href="favicon.gif">
  20. </head>
  21. <script type="text/javascript" src="transitionshow.js">
  22.  
  23. /***********************************************
  24. * Random Transitions Slideshow- by JavaScript Kit (www.javascriptkit.com)
  25. * This notice must stay intact for usage
  26. * Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code
  27. ***********************************************/
  28.  
  29. </script>
  30. <body>
  31. <script>
  32. <!--
  33. /*
  34. Background music script
  35. By JavaScript Kit (http://javascriptkit.com)
  36. Over 400+ free scripts here!
  37. */
  38.  
  39. //specify FULL path to midi
  40. var musicsrc="http://localhost/lavis/NicolaBoschetti_GiochiDiLuce.mp4"
  41. if (navigator.appName=="Microsoft Internet Explorer")
  42. document.write('<bgsound src='+'"'+musicsrc+'"'+' loop="infinite">')
  43. else 
  44. document.write('<embed src=\"'+musicsrc+'\" hidden="true" border="0" width="20" height="20" autostart="true" loop="true">')
  45. //-->
  46. </script>
  47.  
  48. <script type="text/javascript" src="ajaxNavigation.js"></script>
  49.  
  50. <table width="1000" height="650"border="0" align="center">
  51.   <tr>
  52.     <td width="250"><table width="250" height="105" border="0" valign = "top">
  53.       <tr>
  54.         <td><div id="header">
  55.             <h1><em>LAVIS</em></h1>
  56.         </div></td>
  57.       </tr>
  58.     </table>
  59.     <table width="250" border="0">
  60.         <tr>
  61.           <td><script type="text/javascript">
  62.  
  63. var flashyshow=new flashyslideshow({ //create instance of slideshow
  64.     wrapperid: "left-person", //unique ID for this slideshow
  65.     //wrapperclass: "flashclass", //desired CSS class for this slideshow
  66.     imagearray: [
  67.         ["compimg/lavis.jpg", "", "", ""],
  68.         ["compimg/lavis (1).jpg", "", "", ""],
  69.         ["compimg/lavis (2).jpg", "", "", ""],
  70.         ["compimg/lavis (3).jpg", "", "", ""],
  71.     ],
  72.     pause: 3000, //pause between content change (millisec)
  73.     transduration: 8000 //duration of transition (affects only IE users)
  74. })
  75. </script></td>
  76.         </tr>
  77.       </table></td>
  78.     <td width="500"><table width="500" border="0">
  79.       <tr>
  80.         <td><div id="nav-top">
  81.             <ul>
  82.               <li><a href="#">Contacts</a> |</li>
  83.               <li><a href="#">Feedback</a> |</li>
  84.               <li><a href="#">FAQS</a> |</li>
  85.               <li><a href="#">Site Map</a></li>
  86.             </ul>
  87.         </div>
  88.             <div id="nav">
  89.               <div>
  90.                 <ul>
  91.                   <li><a href="#">HOME</a> &nbsp;|&nbsp;</li>
  92.                   <li><a href="#">ACCESSORIES</a> &nbsp;|&nbsp;</li>
  93.                   <li><a href="#">MEN COLLECTION</a> &nbsp;|&nbsp;</li>
  94.                   <li><a href="#">WOMEN COLLECTION</a> &nbsp;|&nbsp;</li>
  95.                   <li><a href="#">KIDS COLLECTION</a></li>
  96.                 </ul>
  97.               </div>
  98.             </div></td>
  99.       </tr>
  100.       <tr>
  101.         <td> 
  102.                 <div class="clear"></div>    
  103. </div></td>
  104.       </tr>
  105.       <tr>
  106.         <td>
  107. <?
  108. }
  109. ?>
  110.  
  111. <?
  112. function Footer()
  113. {
  114. ?>    </td>
  115.         </tr>
  116.     </table>
  117.  
  118.  
  119.  
  120. </td>
  121.     <td width="250"><table width="250" border="0" height="105" valign = "top">
  122.       <tr>
  123.         <td><div id="headerright">
  124.     <h1><em>CASUAL</em><strong>collections</strong></h1>
  125. </div></td>
  126.       </tr>
  127.     </table>
  128.       <table width="250" border="0">
  129.         <tr>
  130.           <td><script type="text/javascript">
  131.  
  132. var flashyshow=new flashyslideshow({ //create instance of slideshow
  133.     wrapperid: "right-person", //unique ID for this slideshow
  134.     //wrapperclass: "flashclass", //desired CSS class for this slideshow
  135.     imagearray: [
  136.         ["compimg/lavis.jpg", "", "", ""],
  137.         ["compimg/lavis (1).jpg", "", "", ""],
  138.         ["compimg/lavis (2).jpg", "", "", ""],
  139.         ["compimg/lavis (3).jpg", "", "", ""],
  140.     ],
  141.     pause: 5000, //pause between content change (millisec)
  142.     transduration: 10000 //duration of transition (affects only IE users)
  143. })
  144. </script>
  145.  
  146. </td>
  147.         </tr>
  148.       </table></td>
  149.   </tr>
  150. </table>
  151.  
  152. <table width="1000" border="0" align="center">
  153.   <tr>
  154.     <td>
  155.     <div class="clear"></div>
  156.     <hr color="#00FF00" align="center">
  157. <div id="footer">
  158.             <ul>
  159.               <li><a href="#">Contacts</a> |</li>
  160.               <li><a href="#">Feedback</a> |</li>
  161.               <li><a href="#">FAQS</a> |</li>
  162.               <li><a href="#">Site Map</a></li>
  163.               <li>&nbsp;&nbsp;&nbsp;&nbsp;&copy;<? echo date("Y"); ?></li>
  164.             </ul>
  165.         </div></td>
  166.   </tr>
  167. </table>
  168. </body>
  169. </html>
  170. <?
  171. }
  172. ?>
  173.  
A pape (FAQs) where I use template

Expand|Select|Wrap|Line Numbers
  1. <?
  2. //require_once'functions.php';
  3. require_once'template.php';
  4.  
  5. Head('Frequently asked questions');
  6. ?>
  7.  
  8. <table align="center">
  9.   <tr>
  10.     <td><div id="pgcontent">
  11.       <p>wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww555555555555555555555</p>
  12.       <p>yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</p>
  13.       <p>yyyyyyyyyyyyyyyyyy      </p>
  14.     </div></td>
  15.   </tr>
  16. </table>
  17.  
  18.  
  19.  
  20.  
  21. <?
  22. Footer();
  23. ?>
  24.  
  25. My links, governed by the css "header" and those in the footer do not come out clearly like they do in the index page.
  26.  
  27. they appear larger and distorted.
  28.  
  29. Also, the div area now fits the content area but the information still overflows
  30.  
  31. Your help will be highly appreciated.
  32.  
May 22 '09 #11
drhowarddrfine
7,435 Expert 4TB
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:
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3.  
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.
May 22 '09 #12
gnawz
64
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
May 22 '09 #13
drhowarddrfine
7,435 Expert 4TB
Ok but now you need to show the corrected html.
May 22 '09 #14
gnawz
64
I managed to fix the content in div problem using white space wrap
May 22 '09 #15

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

reply views Thread by Federico Moschini [328594] | last post: by
6 posts views Thread by scottyman | last post: by
17 posts views Thread by Rob R. Ainscough | last post: by
3 posts views Thread by domnulnopcea | last post: by
1 post views Thread by CARIGAR | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.