By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
449,215 Members | 1,934 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 449,215 IT Pros & Developers. It's quick & easy.

Floating div problem

P: n/a
I have this page that has layout like the following:
(no frameset)
----------------------------------------
| header |
|--------------------------------------|
| div1 | div2 |
| | |
|-------------------| |
| div3 | |
| | |
| |------------------|
| | div4 |
| | |
| | |
| | |
| | |
----------------------------------------

The page has to use all the browser space, without
having scrollbar in the outer page, if possible.

Also, Since I need to hide div2 and div3 in some
situation, I implemented it with 4 floating div.

Everything works fine in IE6. However, in Mozilla
(1.7.3), somehow the div1 and div3 overlapped.
You can see this by loading the source below into
Mozilla. I wonder if this is a bug in the Mozilla?
Also, does anyone has a solution that can be applied
to both IE6 and Mozilla?

Bryan

-------------- Start Source -----------------
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<html style="width:100%; height:100%" xml:lang="en" lang="en"
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Move Test</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml;
charset=UTF-8" />
<style type="text/css">
.div1N {width:50%;height:20%;float:left;clear:left;}
.div2N {width:50%;height:50%;float:right;clear:right;}
.div3N {width:50%;height:80%;float:left;clear:left;}
.div4N {width:50%;height:50%;float:right;clear:right;}
.div1M {width:100%;height:20%;}
.div2M {float:none;display:none;}
.div3M {float:none;display:none;}
.div4M {width:100%;height:80%;}
</style>
<script language="javascript" type="text/javascript">
function Max_Normal(o)
{
var odiv1 = document.getElementById("div1");
var odiv2 = document.getElementById("div2");
var odiv3 = document.getElementById("div3");
var odiv4 = document.getElementById("div4");
if (odiv1.className == "div1N")
{
o.value ="Normalize";
odiv1.className = "div1M";
odiv2.className = "div2M";
odiv3.className = "div3M";
odiv4.className = "div4M";
}
else
{
o.value ="Maximize";
odiv1.className = "div1N";
odiv2.className = "div2N";
odiv3.className = "div3N";
odiv4.className = "div4N";
}
}
</script>
</head>
<body style="height:100%;width:100%; margin:0px; paddding:0px;
overflow:auto; vertical-align:top;">
<table cellpadding="0" cellspacing="0" style="width:100%; height:100%;">
<tr>
<td>
<input type="button" value="Maximize" onclick="Max_Normal(this)" />
</td>
</tr>
<tr>
<td style="width:100%; height:100%;">
<div id="div1" class="div1N">
<table cellpadding="0" cellspacing="0" style="width:100%; height:100%;">
<tr>
<td>&nbsp;div1</td>
</tr>
<tr>
<td style="width:100%; height:100%; border:1px red solid;">
<iframe id="if1" name="if1" src="select1.html" frameborder="0"
style="width:100%; height:100%;"></iframe>
</td>
</tr>
</table>
</div>
<div id="div2" class="div2N">
<table cellpadding="0" cellspacing="0" style="width:100%; height:100%;">
<tr>
<td>&nbsp;div2</td>
</tr>
<tr>
<td style="width:100%; height:100%; border:1px blue solid;">
<iframe id="if2" name="if2" src="select2.html" frameborder="0"
style="width:100%; height:100%;"></iframe>
</td>
</tr>
</table>
</div>
<div id="div3" class="div3N">
<table cellpadding="0" cellspacing="0" style="width:100%; height:100%;">
<tr>
<td>&nbsp;div3 <span style="background:red">(Div1 & Div3
overlapped in Mozilla)</span></td>
</tr>
<tr>
<td style="width:100%; height:100%; border:1px green solid;">
<iframe id="if3" name="if3" src="select3.html" frameborder="0"
style="width:100%; height:100%;"></iframe>
</td>
</tr>
</table>
</div>
<div id="div4" class="div4N">
<table cellpadding="0" cellspacing="0" style="width:100%; height:100%;">
<tr>
<td>&nbsp;div4<span style="background:green">(Div2 & Div4
OK)</span></td>
</tr>
<tr>
<td style="width:100%; height:100%; border:1px yellow solid;">
<iframe id="if4" name="if4" src="select4.html" frameborder="0"
style="width:100%; height:100%;"></iframe>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
-------------- end Source -----------------
Jul 21 '05 #1
Share this Question
Share on Google+
10 Replies


P: n/a
In comp.infosystems.www.authoring.stylesheets NoSpan said:
You can see this by loading the source below into
Mozilla.


so instead of supplying a url i can easily click on and then click on
another button to view the source in my editor you want me to:

1. copy source
2. start editor
3. paste in editor
4. save somewhere
5. start browsers
6. find file and open it.

i don't think so.

--
the facts and opinions expressed by brucies
l i t t l e v o i c e s
are not necessarily the same as those held by brucie.
Jul 21 '05 #2

P: n/a
On Tue, 02 Nov 2004 15:53:13 -0800, NoSpan <No****@hotmail.com> wrote:
I have this page that has layout like the following:
(no frameset)


This requires a URL for any effective help.
Jul 21 '05 #3

P: n/a
On Wed, 3 Nov 2004 10:24:02 +1000, brucie <sh**@usenetshit.info>
wrote:
In comp.infosystems.www.authoring.stylesheets NoSpan said:
You can see this by loading the source below into
Mozilla.


so instead of supplying a url i can easily click on and then click on
another button to view the source in my editor you want me to:

1. copy source
2. start editor
3. paste in editor
4. save somewhere
5. start browsers
6. find file and open it.

i don't think so.


Well if you could take six years just to type that and be bitchy.....

BB
www.kruse.co.uk
The home of SEO that's shiny!
Jul 21 '05 #4

P: n/a
In comp.infosystems.www.authoring.stylesheets Big Bill said:
Well if you could take six years just to type that and be bitchy.....


shouldn't you be obsessing over search engines somewhere?
--
the facts and opinions expressed by brucies
l i t t l e v o i c e s
are not necessarily the same as those held by brucie.
Jul 21 '05 #5

P: n/a
Neal wrote:
On Tue, 02 Nov 2004 15:53:13 -0800, NoSpan <No****@hotmail.com> wrote:
I have this page that has layout like the following:
(no frameset)

This requires a URL for any effective help.

Since 2 people suggest I use an URL, I will try to find a free web space
and come back again.

Bryan
Jul 21 '05 #6

P: n/a
On Wed, 03 Nov 2004 06:29:36 GMT, Big Bill <kr***@cityscape.co.uk> wrote:
Well if you could take six years just to type that and be bitchy.....


brucie doesn't type. He uses a pointy stick interface.
Jul 21 '05 #7

P: n/a
On Wed, 3 Nov 2004 21:21:52 +1000, brucie <sh**@usenetshit.info>
wrote:
In comp.infosystems.www.authoring.stylesheets Big Bill said:
Well if you could take six years just to type that and be bitchy.....


shouldn't you be obsessing over search engines somewhere?


Everyone needs a holiday.

BB (except you, before you say it).
www.kruse.co.uk
The home of SEO that's shiny!
Jul 21 '05 #8

P: n/a
OK. The site is now up in the URL

http://test543.htmlplanet.com/Move/move3.html

Hope this is worth it 8-).

Bryan
----- Original Problem Description -----
I have this page that has layout like the following:
(no frameset)
----------------------------------------
| header |
|--------------------------------------|
| div1 | div2 |
| | |
|-------------------| |
| div3 | |
| | |
| |------------------|
| | div4 |
| | |
| | |
| | |
| | |
----------------------------------------

The page has to use all the browser space, without
having scrollbar in the outer page, if possible.

Also, Since I need to hide div2 and div3 in some
situation, I implemented it with 4 floating div.

Everything works fine in IE6. However, in Mozilla
(1.7.3), somehow the div1 and div3 overlapped.
You can see this by loading the source below into
Mozilla. I wonder if this is a bug in the Mozilla?
Also, does anyone has a solution that can be applied
to both IE6 and Mozilla?

Bryan
Jul 21 '05 #9

P: n/a
Mozilla is usually more standard compliant than IE6 - I tried
validating your page using http://validator.w3.org/ and it contains
html errors, you should probably fix those before trying to solve the
problem.

Rob
Everything works fine in IE6. However, in Mozilla
(1.7.3), somehow the div1 and div3 overlapped.
You can see this by loading the source below into
Mozilla. I wonder if this is a bug in the Mozilla?
Also, does anyone has a solution that can be applied
to both IE6 and Mozilla?

Bryan


Jul 21 '05 #10

P: n/a
ne**@robdavis.plus.com wrote:

It's updated. and I checked the page using http://validator.w3.org/
and it's valid now, but the problem still remain. So here's the link again

http://test543.htmlplanet.com/Move/move3.html

Thanks for the pointer

Bryan
Mozilla is usually more standard compliant than IE6 - I tried
validating your page using http://validator.w3.org/ and it contains
html errors, you should probably fix those before trying to solve the
problem.

Rob

Everything works fine in IE6. However, in Mozilla
(1.7.3), somehow the div1 and div3 overlapped.
You can see this by loading the source below into
Mozilla. I wonder if this is a bug in the Mozilla?
Also, does anyone has a solution that can be applied
to both IE6 and Mozilla?

Bryan


Jul 21 '05 #11

This discussion thread is closed

Replies have been disabled for this discussion.