I'm trying to move to using tableless page layouts, but I've come across
what appears to be a bug in IE5's rendering that I can't find a way to
overcome.
The page has a sidebar to the left of the main content area. The main
content are has several subsections, each of which starts with a mini-menu
of four links. I want to have these laid out across the full width of the
column.
Here's an ASCII attempt to show the desired page layout:
+-----------------------------------------------+
| P A G E T I T L E |
+---+-------------------------------------------+
| S | Content section title |
| I | Subsection title |
| D | Option Option Option Option |
| E | One Two Three Four |
| B | subsection content |
| A | ... |
| R | ... |
+---+ |
| Subsection title |
| Option Option Option Option |
| One Two Three Four |
| subsection content |
| ... |
| ... |
+-----------------------------------------------+
| Page footer |
+-----------------------------------------------+
I've been been attempting to do this by having each option as an inlined
<div>, floated left, with a width of 25% and centred text. The four
options are then contained within a parent div, also floated left, with a
width of 100%. This works in Gecko-based browsers and Opera, but doesn't
in IE5 - the menu extends off to the right of the viewport.
The CSS standard says, for percentage widths, "The percentage is
calculated with respect to the width of the generated box's containing
block". It looks like IE5 is ignoring this and calculating the
percentages with respect to the viewport width.
Is there a way to work around this problem? I've spent ages trying to
fool IE into calculating the correct widths, but couldn't work out a way.
A simplified version of the source for my page is below. I've cut out
as much extraneous stuff as possible, but it's still quite long - sorry.
Thanks in advance for any suggestions.
<?xml version="1.0" encoding="us-ascii"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<style type="text/css">
@media screen, print
{
body {
margin: 10px;
text-align: center;
}
div, h1, h2, h3, p {
padding: 0em;
border: 0em;
margin: 0em;
}
p {
padding: 0.5em 0em;
}
div#container {
border: 1px solid grey;
margin: 1em auto;
text-align: left;
width: 100%;
}
div#title {
background-color: #DDDDDD;
border-bottom: 1px solid grey;
text-align: center;
}
div#sidebar {
float: left;
border-bottom: 1px solid grey;
border-right: 1px solid grey;
padding: 1em;
width: 12em;
}
div#content {
margin-left: 14em;
padding: 1em;
}
div#footer {
clear: both;
padding: 0.5em;
background-color: #DDDDDD;
border-top: 1px solid grey;
}
div.options {
float: left;
width: 100%;
}
div.option {
display: inline;
float: left;
text-align: center;
width: 25%;
}
}
</style>
</head>
<body>
<div id="container">
<div id="title">
<h1>Title</h1>
</div>
<div id="sidebar">
<h2>Sidebar</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Nullam scelerisque aliquet est. Sed turpis nisl, egestas at,
luctus nec, dapibus non, nunc. Ut augue. Etiam porttitor
urna ac quam. Nunc sapien. Integer est.
</p>
<p>
Aliquam aliquet. Phasellus a turpis. Phasellus ultricies
dapibus elit. Pellentesque vitae orci malesuada est
imperdiet scelerisque. Maecenas cursus dignissim nunc.
</p>
</div>
<div id="content">
<h2>Main content section</h2>
<div id="vp-list">
<h3>Subsection One</h3>
<div class="options">
<div class="option">
<a href="#">Link 1.1</a>
</div>
<div class="option">
<a href="#">Link 1.2</a>
</div>
<div class="option">
<a href="#">Link 1.3</a>
</div>
<div class="option">
<a href="#">Link 1.4</a>
</div>
</div>
<p>
Fusce quis elit et diam condimentum accumsan. Nullam
erat odio, viverra non, ornare fermentum, dictum vitae,
diam. Nunc quam tortor, bibendum vitae, dignissim nec,
accumsan eget, enim. Morbi vitae dolor ac nisl
ullamcorper viverra. Praesent vel velit. Curabitur eu
arcu sed dui dictum tempor. Aenean lectus lectus, mattis
eu, accumsan et, pulvinar at, urna. Donec quis dui. Nunc
ullamcorper massa eu lacus. Vestibulum non velit.
Suspendisse accumsan nulla in dui.
</p>
<p>
Nulla dolor tellus, pharetra nec, sagittis malesuada,
semper eget, massa. Donec wisi enim, blandit sit amet,
commodo sit amet, vulputate sit amet, pede. Vivamus
hendrerit. Aliquam eu neque. Morbi sed urna. Aenean
euismod scelerisque turpis. In hac habitasse platea
dictumst. Sed pulvinar tempus sem. Fusce tincidunt,
quam at congue vestibulum, sem libero commodo odio,
vel consequat orci elit quis purus.
</p>
<h3>Subsection Two</h3>
<div class="options">
<div class="option">
<a href="#">Link 2.1</a>
</div>
<div class="option">
<a href="#">Link 2.2</a>
</div>
<div class="option">
<a href="#">Link 2.3</a>
</div>
<div class="option">
<a href="#">Link 2.4</a>
</div>
</div>
<p>
Proin velit augue, consequat eget, faucibus nec, tempor
non, sapien. Ut mattis lobortis nibh. Nulla tempus nulla
vel sem. In nonummy enim eget est. Praesent fermentum
dolor a est. Aenean id lectus a sem ultricies molestie.
Curabitur aliquam lacinia felis. Suspendisse malesuada
arcu et wisi vehicula vestibulum. Integer mauris massa,
gravida a, dapibus eu, venenatis et, sapien. Nam vitae
risus a elit consequat pharetra. Proin pretium. Morbi
fermentum dapibus sapien. Aliquam dolor.
</p>
<p>
Morbi porta, dolor quis adipiscing aliquam, libero metus
cursus magna, in pretium dolor pede eget libero. Donec
quis dolor. Pellentesque ultrices aliquam tellus. Nam
ipsum. Morbi ultricies. Donec blandit, velit et porta
blandit, erat ligula vestibulum erat, at tempus massa
est ac odio. Donec sit amet ligula id wisi scelerisque
sodales. Suspendisse vestibulum ipsum at nibh. Proin
fermentum justo sed quam.
</p>
</div>
</div>
<div id="footer">
<h2>Footer</h2>
<p>
Phasellus sit amet lorem id pede tempus mattis. Sed varius
scelerisque erat. Donec pulvinar, odio sit amet congue
vulputate, erat ipsum fermentum leo, non ullamcorper lacus
magna at quam. Donec vel orci ut neque pulvinar vestibulum.
Aliquam et ante non metus aliquet sodales. Praesent sapien
nunc, varius vitae, imperdiet quis, iaculis eu, tellus.
Sed lorem. Duis eu arcu sed magna consectetuer dictum.
Pellentesque eget odio. Quisque cursus nonummy lacus. Donec
tempus. Integer ornare, mi nec commodo auctor, dui nunc
rhoncus nibh, in aliquet odio orci id lacus. Donec aliquam,
metus id sodales fringilla, leo erat porttitor nibh, ut
lobortis tortor turpis et nunc.
</p>
</div>
</div>
</body>
</html>
Cheers,
- olly
--
Oliver Burnett-Hall
rot13://byyl@oheargg-unyy.pb.hx
Need workaround for IE5 miscalculating percentage widths 
