Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Senior Coder
    Join Date
    May 2006
    Posts
    1,683
    Thanks
    28
    Thanked 4 Times in 4 Posts

    Can I add scrolling to this div box ?

    Hello,
    I have got a div box that is filled up with output from an mysql table and
    anymore and it will start printing outside the box.

    Here is an image to show you what I mean:



    Is there any way I can add scrolling so that the next rows do not print outside the box ?

    This is my code:

    Code:
    <div class="out_box cont01">
      <span class="hot02">My Tutorials</span>
        <div class="in_box cont03">
     	<div class="hot04">
            <p style="font-size: 10pt;">
    <?php 
     DO THE SQL QUERY
    
    echo "<span style =\"color:$colr;\">$ctr) $D_tute_hd &nbsp;&nbsp</span><a href=\"$link\">edit</a><br>";
     </p>
    </div> <!-- End div:hot04 --> 
    </div> <!-- End div:hot03 -->
    </div> <!-- End div:hot01 -->
    AND THE CSS

    Code:
    .out_box{  
      float:left;
    	text-align: left;
    	margin: 0 0 0 10px;
     }
    
    .hot02{
      font-size: 14px; 
      font-weight: bold; 
    	text-align: left;
     }
    
    .in_box{
      border: 1px;
      border-style: solid;
      border-color: #ccc;
      float:left;
    	text-align: left;
    	margin: 10px;
     }
    
    .hot04{
      font-size: 12px; 
     	margin: 10px;
     }
    
    .cont01{
      width:280px;
    }
    
    .cont03{
      width:260px;
    	height:300px;
    }
    I hope there is way to do this

    Thanks

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,746
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello jeddi,
    You can add overflow-y:scroll; to whichever box has the content. The box probably already has a height set on it? It will need one if it doesn't.

    Try this:
    Code:
    .hot04{
    height: 300px;
    overflow-y: scroll;
      font-size: 12px; 
     	margin: 10px;
     }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    jeddi (02-17-2009)

  • #3
    Senior Coder
    Join Date
    May 2006
    Posts
    1,683
    Thanks
    28
    Thanked 4 Times in 4 Posts
    Thanks a lot

    In fact I needed to put it on the ".cont03"
    because thats the one that had the hieght on it.

    And it worked great ... now I know


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •