473,692 Members | 1,947 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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

Oct 7 '05 #1
9 35208
Veerle wrote in message news:11******** **************@ g49g2000cwa.goo glegroups.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
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
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
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
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.dt d">
<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">rect 1</div>
<div id="rect3">rect 3</div>
</div>
<div id="col2">
<div id="rect2">rect 2</div>
<div id="rect4">rect 4</div>
</div>
</body>
</html>

--
chin chin
Sinclair
Oct 10 '05 #6
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
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
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
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.dt d">

<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">rect 1</div>
<div id="rect2">rect 2</div>
<br />
<div id="rect3">rect 3</div>
<div id="rect4">rect 4</div>
<br />
</body>
</html>

--
Change "seven" to a digit to email me.
Nov 3 '05 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
2317
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 middel (all actions run here), and on bottom html pages will be shown. The bottom page contains forms witch is developed with a 3ed party design tool from Acrobat and stored as HTML. It wouldn't be any problem storing these files as html. But the main...
5
10069
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 page). Is there an easy way to do this or do I need to stream the html into my application and parse unwanted header/footer info before rendering it within the application page (as a literal control, i imagine) Has anyone done this or seen any...
5
2337
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 the <head></head> tags? If I placed the script tags at the beginning of the html page, I can have the Draggale Layer shown and movable by the mouse, but the entired page will not read the style.css file (as I found the font displayed very ugly);...
7
2447
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 rendered as a page (or actualy a part of a page) that is editiable. To do this I let the user download the document, edit it and then upload it back to the site. Then at Page_Open, I convert the .doc file to an html and render it back to the page......
8
3344
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 the folder in which the all the 4 files (3 HTML + 1 ASP) reside & select Index.html (by clicking with the mouse or by using the arrow keys on the keyboard), strangely the Windows "File Download" dialog box (with 'Open', 'Save', 'Cancel', 'More...
1
1827
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 it is, does anybody have any code samples? *** Sent via Developersdex http://www.developersdex.com ***
17
2526
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 website. When I click in Google on one of these pages (not index.html or home.html), I am only linked to that one html-page and not to the website itself. Does anyone know how to fix this. Is there for example a metatag? Thanks
22
6024
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 automatically. I learned enough Perl (read: just enough) to code a script that does what I want it to do. Now the question is: how to get it to run automatically. I would like the program to be invoked when someone, anyone, hits my homepage. I...
10
3465
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 ------------- I have perl script which simply runs a ps on a Solaris server and generates a static html page with all of the code perfectly and this html page works fine when viewing it statically or with a META REFRESH header tag. The idea is to give the user...
0
8603
marktang
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, people are often confused as to whether an ONU can Work As a Router. In this blog post, weíll explore What is ONU, What Is Router, ONU & Routerís main usage, and What is the difference between ONU and Router. Letís take a closer look ! Part I. Meaning of...
0
8538
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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9083
Oralloy
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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
8960
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
8797
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
4323
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
2972
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
2237
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
1957
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.