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@g49g2000cwa.googlegr oups.com...[color=blue]
> 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?[/color]

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.

Veerle wrote:[color=blue]
> 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
>[/color]
Veerle,

<style type="text/css">
body {
height: 100%;
padding: 0;
margin: 0;
}
html {
height: 100%;
padding: 0;
margin: 0;
}
#rect1 {
background-color: #666666;
float: left;
width: 49% ;
height: 50%;
}
#rect2 {
background-color: #999999;
height: 50%;
}
#rect3 {
background-color: #999999;
float: left;
width: 49% ;
height: 50%;
}
#rect4 {
background-color: #666666;
height: 50%;
}
</style>

Works on Netscape 7.1 and (sort of) IE 6. The latter puts a thin
vertical bar down the center of the screen. This may be the '3 pixel'
problem I've read about (and which you can search for).

Key: You must specify an explicit height for the topmost element. For
IE, this seems to be the <body> element; for Netscape it seems to be the
<html> element, so I've specified it on both.

Also, I had set the <div> widths to 50%, but a ruler measurement showed
that I was getting the left side a bit wider than the right, so I backed
it off to 49%, which measured better. That could be a fluke of my CRT,
so you should conduct your own tests.

Chris Beall

Chris, thanks a lot for your helpful response!
[color=blue]
> Works on Netscape 7.1 and (sort of) IE 6. The latter puts a thin
> vertical bar down the center of the screen. This may be the '3 pixel'
> problem I've read about (and which you can search for).[/color]

I tried it in IE6 and Firefox. In Firefox, it looks perfect. In IE
there is a small white gap in the middle, as you said.

Key: You must specify an explicit height for the topmost element. For
IE, this seems to be the <body> element; for Netscape it seems to be
the
<html> element, so I've specified it on both.

The specification for the height on the <html> element (for Netscape as
well as Firefox) is a trick I would not have been able to come up with
myself...

After trying some things again, I found a solution that hasn't got the
small white gap in the middle. It involves making two
divs that act like columns and create the 2 rows in it. See
http://home.scarlet.be/~vv991306/test2.html
But this creates another problem: when resizing the IE window, the 2
blocks on the right sometimes appear under the blocks on the left :-(

Another thing is: when the width of the content of one of the blocks is
greater than 50% of the browser window, then the blocks appear under
one another whatsoever. I would prefer not to have that behaviour, but
rather to have horizontal scrollbars show up. This is the case for IE
and Firefox...

This is such a mess to get it right... I would like so much to this
"the right way" and not use a table, but using a table gives me all the
behaviour I want and it works in IE en Mozilla without problems:
http://home.scarlet.be/~vv991306/test3.html
The big disadvantage is not only the fact that I use a table for the
soul purpose of layout, but also I have to leave out the dtd
declaration in my doctype because otherwise the table solution doesn't
work as well (in IE and in Firefox).

Veerle

Veerle schreef:[color=blue]
> Chris, thanks a lot for your helpful response!
>
>[color=green]
>>Works on Netscape 7.1 and (sort of) IE 6. The latter puts a thin
>>vertical bar down the center of the screen. This may be the '3 pixel'
>>problem I've read about (and which you can search for).[/color]
>
>
> I tried it in IE6 and Firefox. In Firefox, it looks perfect. In IE
> there is a small white gap in the middle, as you said.
>
> Key: You must specify an explicit height for the topmost element. For
> IE, this seems to be the <body> element; for Netscape it seems to be
> the
> <html> element, so I've specified it on both.
>
> The specification for the height on the <html> element (for Netscape as
> well as Firefox) is a trick I would not have been able to come up with
> myself...
>
> After trying some things again, I found a solution that hasn't got the
> small white gap in the middle. It involves making two
> divs that act like columns and create the 2 rows in it. See
> http://home.scarlet.be/~vv991306/test2.html
> But this creates another problem: when resizing the IE window, the 2
> blocks on the right sometimes appear under the blocks on the left :-(
>
> Another thing is: when the width of the content of one of the blocks is
> greater than 50% of the browser window, then the blocks appear under
> one another whatsoever. I would prefer not to have that behaviour, but
> rather to have horizontal scrollbars show up. This is the case for IE
> and Firefox...
>
> This is such a mess to get it right... I would like so much to this
> "the right way" and not use a table, but using a table gives me all the
> behaviour I want and it works in IE en Mozilla without problems:
> http://home.scarlet.be/~vv991306/test3.html
> The big disadvantage is not only the fact that I use a table for the
> soul purpose of layout, but also I have to leave out the dtd
> declaration in my doctype because otherwise the table solution doesn't
> work as well (in IE and in Firefox).
>
> Veerle
>[/color]

There you got the Achilles' heel of CSS. It really is a shame that 'simple' things like this just don't seem
to work in CSS, or am I still thinking tables to much?

--
Niek

Veerle wrote:[color=blue]
> 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
>[/color]
Hey,

Does this work?.........

<!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">
<head>
<title>4sq</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" >
body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}

html {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}

#col1 {
float: left;
width: 50%;
height: 100%;
padding: 0px;
margin: 0px;
}

#col2 {
float: right;
width: 50%;
height: 100%;
padding: 0px;
margin: 0px;
}

#rect1 {
background-color: #666666;
width: 100%;
height: 50%;
padding: 0px;
margin: 0px;
}

#rect2 {
background-color: #999999;
width: 100%;
height: 50%;
padding: 0px;
margin: 0px;
}

#rect3 {
background-color: #999999;
width: 100%;
height: 50%;
padding: 0px;
margin: 0px;
}

#rect4 {
background-color: #666666;
width: 100%;
height: 50%;
padding: 0px;
margin: 0px;
}
</style>
</head>
<body>
<div id="col1">
<div id="rect1">rect1</div>
<div id="rect3">rect3</div>
</div>
<div id="col2">
<div id="rect2">rect2</div>
<div id="rect4">rect4</div>
</div>
</body>
</html>

--
chin chin
Sinclair

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:
[color=blue]
> I go along with Chris - I'd set the cols in my examole to 51% and 49%
> and float them both left.[/color]

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...

Veerle wrote:
[color=blue]
> 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
>[/color]

Try this. It works with IE 6, FF 1.0.7, netscape 7.2, and Opera 8.01,
and is close to your original html. It seems the trick to prevent the
divs from folding to the next line was to set the body & html widths to
slightly greater than 100%. The only downside to this is the need to use
<br>'s as this is really not content but presentation in the HTML.

HTH
Regards,
N. Demos

<!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">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html, body {
width: 100.1%;
height: 100%;
padding: 0;
margin: 0;
}
div {
padding: 0;
margin: 0;
width: 50%;
height: 50%;
float: left;
}
#rect1 {
background-color: #666666;
}
#rect2 {
background-color: #999999;
}
#rect3 {
background-color: #999999;
}
#rect4 {
background-color: #666666;
}
br {
clear: left;
}
</style>

</head>
<body>
<div id="rect1">rect1</div>
<div id="rect2">rect2</div>
<br />
<div id="rect3">rect3</div>
<div id="rect4">rect4</div>
<br />
</body>
</html>

--
Change "seven" to a digit to email me.

Divide html page in 4 equal rectangles

re: Divide html page in 4 equal rectangles

re: Divide html page in 4 equal rectangles

re: Divide html page in 4 equal rectangles

re: Divide html page in 4 equal rectangles

re: Divide html page in 4 equal rectangles

re: Divide html page in 4 equal rectangles

re: Divide html page in 4 equal rectangles

re: Divide html page in 4 equal rectangles

re: Divide html page in 4 equal rectangles

Similar HTML / CSS bytes

/bytes/development

/bytes/it

/bytes/about