www.webdeveloper.com
Results 1 to 3 of 3

Thread: Minimum height for div

  1. #1
    Join Date
    Mar 2005
    Posts
    61

    Minimum height for div

    Hello,

    I have the code below, but I can't create the border correctly if the text is not enough. I want the the block should be at least 100px height. If it is more than the border is correct else not.

    How can I solve this?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
    <html>
    <head>
       <style type="text/css">
         body {
          background-color:#F1F3F5;
         }
         #container{
           border: 1px solid #ccc;
           background-color:#fdfdfd;
           margin: auto;
    	   width: 500px;
           background-color:#fdfdfd;
           font-family: Arial, Helvetica, sans-serif;
           font-weight:normal;
           margin-top:10px;
         }
    
         #icon {
           float:left;
           width:143px;
           height:100px;
           font-size : 10px;
           padding-left:5px;
           padding-top:5px;
         }
    
         #text {
           float:left;
           width:340px;
           border-left:1px solid #ccc;
           font-size : 12px;
           padding-left:5px;
           padding-top:5px;
         }
    
    
       </style>
    </head>
    <body>
       <div id="container">
          <div id="icon">Demo</div>
          <div id="text">This is a text</div>
       </div>
       <div id="container">
          <div id="icon">Demo</div>
          <div id="text"><p>This is a text</p><p>This is a text</p><p>This is a text</p><p>This is a text</p><p>This is a text</p><p>This is a text</p></div>
       </div>
    
    </body>

  2. #2
    Join Date
    Aug 2004
    Location
    Ankh-Morpork
    Posts
    18,926
    You just need to "clear the floats". Add this to your style:
    Code:
    .clear {
      font-size: 1px;
      line-height: 1px;
      margin: 0;
      padding: 0;
      border: none;
      clear: both;
    }
    In your HTML:
    HTML Code:
       <div id="container">
          <div id="icon">Demo</div>
          <div id="text">This is a text</div>
          <div class='clear'></div>
       </div>
    "Please give us a simple answer, so that we don't have to think, because if we think, we might find answers that don't fit the way we want the world to be."
    ~ Terry Pratchett in Nation

    eBookworm.us

  3. #3
    Join Date
    Mar 2005
    Posts
    61
    Thanks!

    Unfortunatelly in IE it doesn't work for me

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles