Divide html page in 4 equal rectangles

Hi,

I would like to divide the whole of my html page in 4 equal rectangles
using only div tags in my html. The result should look a bit like this
site: http://users.pandora.be/rausbauten/m...tic/start.html only
there, a table is used to achieve this result.

So using 4 div blocks and by setting 2 of them to float left, I already
got this result: http://home.scarlet.be/~vv991306/test.html
Now I have to set the widths en heigths of all 4 the div blocks to 50%
of the page's width en height. But I don't seem to be able to manage to
do that. Any ideas?

Veerle

Veerle wrote in message news:1128665661.126019.292090 (AT) g49g2000cwa (DOT) googlegroups.com...

Hi,

I would like to divide the whole of my html page in 4 equal rectangles
using only div tags in my html. The result should look a bit like this
site: http://users.pandora.be/rausbauten/m...tic/start.html only
there, a table is used to achieve this result.

So using 4 div blocks and by setting 2 of them to float left, I already
got this result: http://home.scarlet.be/~vv991306/test.html
Now I have to set the widths en heigths of all 4 the div blocks to 50%
of the page's width en height. But I don't seem to be able to manage to
do that. Any ideas?

for the width:
in the <style ...> try
#rect1 {
background-color: #666666;
float: left; width: 50%;
}
#rect3 {
background-color: #999999;
float: left; width: 50%;
}

(leave the other two as is)

for the height I haven't got any idea.

Hey,

small addendum.....

I go along with Chris - I'd set the cols in my examole to 51% and 49%
and float them both left.

HTH

--
chin chin
Sinclair

djinn schreef:

I go along with Chris - I'd set the cols in my examole to 51% and 49%
and float them both left.

Sorry for not answering for a while. By daughter has been very ill for
2 weeks, so I had to give her all my attention.

The solution of Chris doesn't show up correctly in my version of IE.
But making the modifications Djinn suggests, sets that right.

Now only 3 issues left:
(issue 1) In each of the 4 blocks I would like something with fixed
width and height, lets say an image, to show up. This image has to be
centered horizontally and vertically in each block.
(issue 2) When the width of the browser window gets too small for
showing the two images next to one another, I want an horizontal
scrollbar to show up
(issue 3) I would like my webpage to be compliant with html and css
standards, so they have to pass the validators on http://www.w3.org/

Easy to do with tables:
http://home.scarlet.be/~vv991306/test3.html

But in our "only using div" scenario, this gets a bit more complicated.
Lets discuss this issue by issue:
(issue 1) Here the problem trying to align the image vertically in each
block shows up. This is explained very well at
http://www.jakpsatweb.cz/css/css-ver...-solution.html and they
have a very good solution as well. This solution works great in IE en
Mozilla.
(issue 2) By solving issue 1 as explained above, I get the horizontal
scrollbar for free in Mozilla. IE behaves differently: the parts of the
images that don't fit on the screen are left of (try it yourself by
clicking on the link below)... Don't know how to get that right.
(issue 3) The css validator complains that _left, _top, _position don't
exist. If I replace them by left, top and position then the page
doesn't show up correct in Mozilla any more (see:
http://home.scarlet.be/~vv991306/test4a.html)

Result: http://home.scarlet.be/~vv991306/test4.html

So, now I would like to get the horizontal scrollbars in IE and I would
like to get my CSS to be compliant with the standards and all this in a
way that my page looks good and (almost) the same in IE and Mozilla...

Feels like I'm almost there... :-)

Oops, I think I've been too fast, overlooking 2 things:

(1) I was way too fast trying the vertical align solution. I did get it
right using the stuff on
http://www.jakpsatweb.cz/css/css-ver...-solution.html and in a
way so that it is compliant with the W3C standard:
http://home.scarlet.be/~vv991306/test5.html

(2) The horizontal scrollbar in Mozilla isn't quite right: it enables
you to scroll, but some parts of the images are left of, just as it is
in IE

So, if I can manage the horizontal scrollbar in IE en Mozilla to show
up and do it right, then all of my problems are solved...