Expanding height of bordered box

**mickapoo** · 09-15-2008, 07:57 PM

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!

**dumb_prog** · 09-15-2008, 08:42 PM

quick solution, put some <br> inside the white box.

**mickapoo** · 09-15-2008, 08:49 PM

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.

**Coyotelab** · 09-15-2008, 09:19 PM

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;}

**dumb_prog** · 09-15-2008, 09:37 PM

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

**OctoberWind** · 09-15-2008, 10:35 PM

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

**mickapoo** · 09-16-2008, 04:04 AM

Thanks for your help! I put the inline style there & it worked perfectly.

Thread: Expanding height of bordered box

Thread Tools

Display

Expanding height of bordered box

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions