Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
  1. #1
    Junior Member
    Join Date
    Nov 2006
    Posts
    11
    Member #
    14235
    I have a div box with a border with the height set to "auto." Inside the div is some text along with another smaller div box with an image inside.

    The outer box's height isn't increasing to fit around the height of the div inside. Also, IE is doing something very weird by adding some space before the quote mark. Firefox isn't doing that...

    I've attached a screenshot of the issue. Here's my code:
    HTML:
    Code:
    <div id="Case_Study_Container"> 
                <div id="Case_Study_Quote">
               <div id="client_name"> 
                <img src="images/cs_photo_grupo.jpg" width="88" height="118" border="0" alt="Photo" class="photo" />
                 <strong>Mr. Michel Montant</strong>
                  - Vice President of Operations for Grupo Posadas
                </div>
    &quot;Prometeo is at the core of our strategy to create a competitive advantage through service. This advantage will help us create loyal customers that will give us their business for the long term. Prometeo has helped us attain the consistency that is so difficult to achieve in a chain of our size.&quot;</div>            
              </div>
    CSS:

    Code:
    #Case_Study_Container {
        color: #000;
        margin: 10px 0px 10px 0px;
        padding: 10px 10px 10px 10px;
        border: 1px solid #333;
        width: auto;
        }
    
    #Case_Study_Quote {
        margin: 0px 0px 0px 0px;
        padding: 0px;
        background-color: #FFF;
        height: auto;
        }
        
        
    #client_name {
        width: 200px;
        height: 120px;
        margin: 0px 0px 5px 10px;
        padding: 5px 5px 5px 5px;
        float:right;
        background: #FDF8E3;
        border:#000000 solid 1px;
      }
      
    #client_name p {
        margin:0;
        } 
      
    img.photo {
    float: left;
    margin: 0px 10px 2.5px 0px;
    padding: 0px;
    border:none;
    }
    Attached Images Attached Images

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    I see one thing here (missing <div> ... see blue) ... or, there are some out of order?

    <div id="Case_Study_Container">
    <div id="Case_Study_Quote">
    <div id="client_name">
    <img src="images/cs_photo_grupo.jpg" width="88" height="118" border="0" alt="Photo" class="photo" />
    <strong>Mr. Michel Montant</strong>
    - Vice President of Operations for Grupo Posadas
    </div>
    <div>
    &quot;Prometeo is at the core of our strategy to create a competitive advantage through service. This advantage will help us create loyal customers that will give us their business for the long term. Prometeo has helped us attain the consistency that is so difficult to achieve in a chain of our size.&quot;</div>
    </div>
    </div>???


  4. #3
    Junior Member
    Join Date
    Nov 2006
    Posts
    11
    Member #
    14235
    Ok, I checked this again and I have it set up as I want it. The image is floated left with the name/title coming up along the right. I have a feeling I've coded this wrong. I have a container box "Case_Study_Container" with a quote of text "Case_Study_Quote" and inside that is a div "client_name." This div has the background color and border, containing the photo floated left with the person's name and title.

    HMTL:
    Code:
    <div id="Case_Study_Container"> 
              
              <div id="Case_Study_Quote">
               
               <div id="client_name"> 
                <img src="images/cs_photo_grupo.jpg" alt="Photo" width="80" height="114" border="0" class="photo" />
                 <strong>Mr. Michel Montant</strong><br />
                  Vice President of Operations for Grupo Posadas
                  </div>
                  
                &quot;Prometeo is at the core of our strategy to create a competitive
                   advantage through service. This advantage will help us create
                   loyal customers that will give us their business for the long
                   term. Prometeo has helped us attain the consistency that is so
                  difficult to achieve in a chain of our size.&quot;
                  </div>
                              
              </div>
    CSS:
    Code:
    #Case_Study_Container {
        color: #000;
        margin: 10px 0px 10px 0px;
        padding: 10px 10px 10px 10px;
        border: 1px solid #333;
        width: auto;
        }
    
    #Case_Study_Quote {
        margin: 0px 0px 0px 0px;
        padding: 0px;
        background-color: #FFF;
        height: auto;
        }
        
        
    #client_name {
        width: 200px;
        height: auto;
        margin: 0px 0px 5px 10px;
        padding: 5px 5px 5px 5px;
        float:right;
        background: #FDF8E3;
        border:#000000 solid 1px;
      }
      
    #client_name p {
        margin:0;
        } 
         
    img.photo {
    float: left;
    margin: 0px 10px 2.5px 0px;
    padding: 0px;
    border:none;
    }
    Attached Images Attached Images

  5. #4
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    Is there a reason you can't do this?

    #Case_Study_Container {
    color: #000;
    margin: 10px 0px 10px 0px;
    padding: 10px 10px 10px 10px;
    border: 1px solid #333;
    width: auto;
    height: 120px;
    }


  6. #5
    Junior Member
    Join Date
    Nov 2006
    Posts
    11
    Member #
    14235
    The problem is that I need to use this on several pages, and the content on some pages doesn't fill a box with a height of 120px. This is an example.

    HTML
    Code:
     <div id="Case_Study_Container"> 
               <div id="Case_Study_Quote">
               <div id="client_name">
             <strong>Waguih F. Ouess, Manager</strong><br />
             Customer Services Aviation Department, PANYNJ         </div>
                &quot;The Brand Assurance program we developed with LRA is an important tool to help ensure that the airports' promise of delivering a customer experience second-to-none is consistently executed, and customers' expectations are exceeded.&quot;
                </div>         
              </div>
    CSS
    Code:
    #Case_Study_Container {
        color: #000;
        margin: 10px 0px 10px 0px;
        padding: 10px 10px 10px 10px;
        border: 1px solid #333;
        width: auto;
        height:120px;
        }
    
    #Case_Study_Quote {
        margin: 0px 0px 0px 0px;
        padding: 0px;
        background-color: #FFF;
        height: auto;
        }
        
        
    #client_name {
        width: 200px;
        height: auto;
        margin: 0px 0px 5px 10px;
        padding: 5px 5px 5px 5px;
        float:right;
        background: #FDF8E3;
        border:#000000 solid 1px;
      }
      
    #client_name p {
        margin:0;
        } 
         
    img.photo {
    float: left;
    margin: 0px 10px 2.5px 0px;
    padding: 0px;
    border:none;
    }
    Attached Images Attached Images


Remove Ads

Posting Permissions

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

Search tags for this page

firefox div box image container

Click on a term to search for related topics.
All times are GMT -6. The time now is 03:33 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com