www.webdeveloper.com
Results 1 to 7 of 7

Thread: Expanding height of bordered box

  1. #1
    Join Date
    Jan 2004
    Location
    Switzerland
    Posts
    154

    Expanding height of bordered box

    First of all, thanks for your help. My page is http://www.improveyourwebvisibility.com/GeneLeaders. If you look right under the heading "Welcome to Geneleaders.com", you will see a bordered box (it's really light, but it's there) that contains the text, "On this website right here...". What I would like to know is how to extend the height of that bordered box so it expands to fit that text that is there. Currently, the text is expanding way beyond the bottom of that bordered box.


    Thank you so much in advance!

  2. #2
    Join Date
    Sep 2008
    Posts
    3
    quick solution, put some <br> inside the white box.

  3. #3
    Join Date
    Jan 2004
    Location
    Switzerland
    Posts
    154
    I'm not sure what you mean. It's not in a table so there is no actual box in the html file to add the line breaks to. The bordered part I guess is coming from the css file. I guess I just can't find what I need to change in the css file and what I need to add to adjust the height.

    Adding line breaks above or below the actual text in the html file doesn't change the height of the bordered box. It only affects the text, not the box itself.

  4. #4
    look in to this example:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title>test</title>
     <link href="test.css" rel="stylesheet" type="text/css" />
    
    </head>
    
    <body>
    <div id="container">
    <div id="lightbox"><p>On this website right here you are going to find an enormous amount of real information and content on GeneWize life sciences. Jenn Lawlor and myself have put this website together so you can get the facts. On this website right here you are going to find an enormous amount of real information and content on GeneWize life sciences. Jenn Lawlor and myself have put this website together so you can get the facts. On this website right here you are going to find an enormous amount of real information and content on GeneWize life sciences. Jenn Lawlor and myself have put this website together so you can get the facts.On this website right here you are going to find an enormous amount of real information and content on GeneWize life sciences. Jenn Lawlor and myself have put this website together so you can get the facts.</p>
    </div>
    </div>
    </body>
    
    </html>
    Code:
    /*test.css */
    
    body{margin: 0; padding: 0; background: #FFF;}
    
    p{padding: 10px;}
    
    #container{margin: 0 auto; padding-top: 20px; width: 960px;}
    
    #lightbox{background: #F5F4F0; border: 1px solid #DEDBD1; width: 450px; float: left;}

  5. #5
    Join Date
    Sep 2008
    Posts
    3
    Quote Originally Posted by mickapoo
    I'm not sure what you mean. It's not in a table so there is no actual box in the html file to add the line breaks to. The bordered part I guess is coming from the css file. I guess I just can't find what I need to change in the css file and what I need to add to adjust the height.

    Adding line breaks above or below the actual text in the html file doesn't change the height of the bordered box. It only affects the text, not the box itself.
    if it's coming from css, u need to find the css for the border and place margin-bottom: (for example) 200px

  6. #6
    Join Date
    Jul 2007
    Location
    Wisconsin
    Posts
    468
    The element in question is

    Code:
    div#centercol.grid_10 div.box div#featuredpost h3
    The CSS is targeting at #centercol h3, which is applied to more than one element.

    You would either need to make a new class/id to target that one element, or sneak an inline style="height: auto;" to the h3 in question

  7. #7
    Join Date
    Jan 2004
    Location
    Switzerland
    Posts
    154
    Thanks for your help! I put the inline style there & it worked perfectly.

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