Forum Moderators: not2easy
html, body {
background-color: #000000;
margin: 0px;
padding: 0px;
height: 100%;
}
Then:
.left {
width: 50%;
height: 100%;
background-color: #303030;
float: left;
}
...and
.right {
width: 50%;
height: 100%;
background-color: #222222;
float: right;
}
It's easy to understand: it's full-screen height div's. But when I minimize the window and scroll down div's height isn't 100%!
Where's the problem?!
Thanks.
if the div's content doesn't reach the bottom of the page, then neither will the div
the easiest way to do different background colours on two-columns of 50-50, would be to apply a background image to the <body> tag.
do it a couple of pixels tall, and very, very wide. then colour each half with whatever colours you want, and repeat it down the page, positioning it centrally.
and make sure the <divs> are transparent!
you need to make an image that is 800 pixels wide, and a few pixels tall. the first 400 pixels will be coloured blue, and the other 400 pixels will be coloured red.
if you don't make it too fancy, then the file size should be very, very small.
then apply that image to the body as a background image.
body { background: url(path-to-your-image) repeat-y 50% 0%}
the repeat-y bit will make the image go all the way down the page to the bottom.
(ps... i might have got the 50% 0% back-to-front. it might be 0% 50% - i can't remember! but you can sort that out)
all you have to do now is position your <divs> over the background image, and it will look like two columns.
