CSS Window Maximisation Issue

C Garrod · Nov 17, 2003

Hello,

I have been devloping a layout using CSS. The header consists of 3 DIV tags
which segment the top of the page into 3 columns. The problem is when I
open the page in a maximised window in MSIE6 the last DIV tag drops down a
line and resides under the top left DIV.

Has anyone come across this before? If so do you know a work around? This
does not seem to occur in Netscape 7.0.

The CSS Code is copied below...

..headleft {
float: left;
height: 69px;
width: 33%;
border-bottom-style: solid;
border-bottom-color: 330066;
color: #330066;
}
..headright {
float: left;
height: 69px;
width: 33%;
text-align: right;
border-bottom-style: solid;
border-bottom-color: 330066;
}
..headmid {

height: 69px;
float: left;
width: 34%;
text-align: center;
border-bottom-style: solid;
border-bottom-color: 330066;
}

And HTML if anyone wants to simulate the page...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="styles/css.css" rel="stylesheet" type="text/css">
</head>

<body>
<em></em>
<div class="headleft"><span id="larger">Address Line 1</span><br>
<span id="small">Line 2<br>Tel: (00000) 22 xxxx<br>Fax: (00000) 22 xxxx
</span></div>
<div class="headmid">Middle</div>
<div class="headright">Right</div>
</body></body>
</html>

Eric Bohlman · Nov 17, 2003

I have been devloping a layout using CSS. The header consists of 3 DIV
tags which segment the top of the page into 3 columns. The problem is
when I open the page in a maximised window in MSIE6 the last DIV tag
drops down a line and resides under the top left DIV.
[snip]

.headmid {
height: 69px;
float: left;
width: 34%;
text-align: center;
border-bottom-style: solid;
border-bottom-color: 330066;
}

If I change the width here to 33%, the problem goes away. I'm guessing
it's some sort of rounding problem where some of the widths, when
calculated, get rounded up to the nearest pixel giving a total width of
slightly more than 100%.

Toby A Inkster · Nov 17, 2003

Eric said:
If I change the width here to 33%, the problem goes away. I'm guessing
it's some sort of rounding problem where some of the widths, when
calculated, get rounded up to the nearest pixel giving a total width of
slightly more than 100%.

And 33% + 33% + 34% + page margins and padding + borders on the divs =
more than 100%.

Also "border-bottom-color: 330066;" is missing its hash mark "#".

C Garrod · Nov 17, 2003

Thats great thanks, but now I have a 1% gap on the right hand side and it
needs to cross the whole page from one side to the other

Can anyone recommend a way to achieve this in CSS?

Chris.

William Tasso · Nov 17, 2003

C Garrod wrote:

[3-columns]

Thats great thanks, but now I have a 1% gap on the right hand side
and it needs to cross the whole page from one side to the other

Can anyone recommend a way to achieve this in CSS?

Tricky to test without a URL. DIVs will expand to fill the space available
to them - what happens (on your page) if you omit the width on the rightmost
column?

Positioning CSS components	1	Nov 16, 2023
Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
How to position the tooltip comment on these buttons?	9	Nov 4, 2023
How can I get my menu inside of a menu to function properly?	1	Jan 19, 2023
Why is the e.target not working here?	1	Dec 29, 2022
Help with code	0	Jun 12, 2022
Need assistance finetuning HTML, CSS, Javascript - sticky header issue	3	Feb 25, 2022
Need help , Having problem with Drag n Drop ?	9	Dec 21, 2022

CSS Window Maximisation Issue

C Garrod

Eric Bohlman

Toby A Inkster

C Garrod

William Tasso

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads