Divide html page in 4 equal rectangles

Veerle

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

Oct 7 '05 #1

Subscribe Post Reply

35159

Robi

Veerle wrote in message news:11**********************@g49g2000cwa.googlegr oups.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.

Oct 7 '05 #2

Chris Beall

Veerle wrote:

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,

<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

Oct 7 '05 #3

Veerle

Chris, thanks a lot for your helpful response!

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

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

Oct 10 '05 #4

'sNiek

Veerle schreef:

Chris, thanks a lot for your helpful response!

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

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

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

Oct 10 '05 #5

djinn

Veerle wrote:

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

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

Oct 10 '05 #6

djinn

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

Oct 10 '05 #7

Veerle

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

Oct 20 '05 #8

Veerle

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

Oct 20 '05 #9

N. Demos

Veerle wrote:

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

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.

Nov 3 '05 #10

Similar topics

Buffering HTML page

by: Jon Haakon | last post by:

Hi, I'm developing a websolution using ASP and DHTML technology that's running on a MS IIS webserver. My solution is frame based with a toolbar on top, a hidden frame for scripts in the...

ASP / Active Server Pages

Can I dynamically load html page into my aspx page?

by: Earl Teigrob | last post by:

I am creating an application where I would like to give web designers the ablity to create a static html page and dyanamically load it into my application(exactly like loading a user control into a...

ASP.NET

where to place the javascript in html page

by: acord | last post by:

Hi, I m getting annoying display problem when placing javascript tags in a html page. Should the javasscript tags placed at the beginning of a html page before anything start? or placed between...

Javascript

Easy Question ;-) How to render a html page in a table cell of an ASP.NET page

by: SteveM | last post by:

I am sure this is an easy question, but being relatively new to ASP.NET programming, I can not quite grasp what I need to accomplish what I need to do. What I have is a word document that is...

ASP.NET

HTML Page With ASP Frames

by: rn5a | last post by:

I have a HTML page named Index.html which is divided into 3 frames. The URL of 2 of the frames are HTML pages but the 3rd frame houses a ASP page. Now when I go to Windows Explorer, navigate to...

ASP / Active Server Pages

Using stringreader to set email body to html page

by: Mike P | last post by:

I am trying to send out an email that is based upon an HTML page. Is it possible to read the HTML page into something like a StringReader and then set the Mail.Body equal to the StringReader? If...

C# / C Sharp

HTML-page clicked in Google don't get me to the website

by: =?Utf-8?B?Y2F0aGFyaW51cyB2YW4gZGVyIHdlcmY=?= | last post by:

Hello, I have build a website with approximately 30 html-pages. When I search this website in Google, I see the index.html or home.html on this website, but also other html-pages on this...

.NET Framework

Run a Perl program from an HTML page without user intervention

by: owlice | last post by:

Greetings! I thought I'd add a little something to a web site, a "tip of the week," and wanted it automated so that if I get hit by a truck (or, more likely, am forgetful), the tip is updated...

Perl

Ajax does not display a DIV which contains a html page with javascript

by: paulie | last post by:

Hi, I have been experiencing an issue when trying to use AJAX to reload a DIV area using a timer of 2000ms, which contains a html page with another DIV and javascript. Scenario -------------...

Javascript

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++