One step further, just add this:
html, body{
height:100%;
}
Remember that HTMLand BODY are valid elements that wrap all of your
content. To varying extents they can be styled like any other element
on your page. In firefox, HTML and BODY inherit their height and
width from the browser window itself, while in IE, the width is
inherited, but not the height (go figure). So setting them both to
100% height gets things consistent across browsers.
On 8/19/05, alejandro poch <[EMAIL PROTECTED]> wrote:
> Hi man
>
> Just try to write
>
> height: 100%;
>
> on the BODY on the css file and you're done. At least it work for me.
>
>
> Christian Robertson wrote:
>
> > Hi all,
> >
> > I am new to the list, and this is my first posting so please be gentle ;-)
> >
> > I have a task I am trying to accomplish which is not going to plan.
> > The base code for what I want to achieve can be found at:
> > http://www.metamorphosis.info/test/index-test.htm
> >
> > My aim is to place a single blue panel 300px from the left of the
> > screen, and for it to stretch from the top to the bottom. Within
> > that, I would like a content container element, beginning 200px from
> > the top.
> >
> > The result is achieved by the code below in Firefox, but IE will not
> > stretch the pale blue background from top to bottom - seems to fit it
> > to the content. I've tried many options, but without success.
> >
> > Can anyone please put me on the right track? Apologies if the solution
> > is simple, but it's often the simple plans which tend to be overlooked.
> >
> > Many thanks in advance.
> >
> > Chris
> >
> > *XHTML:*
> > <body>
> > <div id="maincol">
> > <div id="container">
> > <p>Para 1 ...</p>
> > <p>Para 2 ...</p>
> > </div>
> > </div>
> > </body>
> > </html>
> >
> >
> > *CSS:*
> > body {
> > background-color: #909fb2;
> > margin: 0;} /* body margin set to 38
> > at top - impacts placement */
> >
> > #maincol {
> > position: absolute;
> > left: 300px;
> > width: 270px;
> > height: 100%;
> > background-color: #b1bbc8;}
> >
> > #container {
> > position: relative;
> > top: 200px;
> > width: 268px;
> > border: 1px solid #fff;
> > background-color: #b1bbc8;}
>
>
>
> ******************************************************
> The discussion list for http://webstandardsgroup.org/
>
> See http://webstandardsgroup.org/mail/guidelines.cfm
> for some hints on posting to the list & getting help
> ******************************************************
>
>
--
www.agavegroup.com
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
