height 100%, need help

Lamez · January 15, 2008

I want to make a box as high as it can go without over lapping the footer, or header. I also want the text to automatically do a line break in IE and FF, but I could only get this to work in IE, here is my CSS:

div.leftbox{
word-wrap: break-word;
overflow: hidden;
float: left;
width: 20%;
height: auto;
border: #0099CC solid 1px;
background-color: #FFFFFF;
}

here is a pic, I want the the white box to touch the green parts (header and footer) and automatically stretch when the hight increases.

-Thanks Guys!

Mossman · January 16, 2008

Something like this for the style sheet:


#leftcolumn {
width:20%;
}

#textbox{
word-wrap: break-word;
overflow: hidden;
height: auto;
border: #0099CC solid 1px;
background-color: #FFFFFF;
}

#header {
background-color:#009900;
border: #0099CC solid 1px;
}

#footer {
background-color:#009900;
border: #0099CC solid 1px;
}

And the html like this:


<body>
<div id='leftcolumn'>

<div id='header'>
Header.
</div>

<div id='textbox'>
This is a load of text.
</p>
Blah blah blah
</div>

<div id='footer'>
Footer.
</div>
</div>	

</body>

...ought to solve it. The text box will change size automatically depending on how much you put in it as long as you don't specify a size eg height: 50px;

Sign In

height 100%, need help

Recommended Posts

Lamez

Link to comment

Share on other sites

Mossman

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information