.....wrongly when the browser is restored down. The div reduces correctly but the text and background protudes out to the right.
I've tried reducing the width of the divs inside the 'optionbar' div but they don't seem to change...
Apolgies in advance for my code, I'm a rank beginner who learnt from a couple of (old) books so it's probably a mess, but I would much appreciate if someone could help me on this...here's the code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>my title</title>
<link rel="stylesheet" type="text/css" href="css.css"><!--[if IE]>
<link rel="stylesheet" type="text/css" href="myiehacks.css" />
<![endif]-->
</head>
<body>
<h1 class="titleelem">heading</h1>
<div class="optionbar">
<div class="h"><a class="options" href="index.html">homepage</a></div>
<div class="r"><a class="options" href="chooselevel.html">read the news</a></div>
<div class="g"><a class="options" href="grammarhome.html">grammar files</a></div>
<div class="c"><a class="options" href="leveltest.html">take our test</a></div>
<div class="a"><a class="options" href="advertise.html">advertise</a></div>
</div>
<div class="correctmain">
<h2>content</h2>
<p>content</p>
</div>
<div class="optionbar">
<div class="h"><a class="options" href="index.html">homepage</a></div>
<div class="r"><a class="options" href="chooselevel.html">read the news</a></div>
<div class="g"><a class="options" href="grammarhome.html">grammar files</a></div>
<div class="c"><a class="options" href="leveltest.html">take our test</a></div>
<div class="a"><a class="options" href="advertise.html">advertise</a></div>
</div>
</body>
</html>body {background: url(bodybackground.jpg);}
h1.titleelem {background: url(elembackground.jpg);text-align: right;height: 21%; width: 95%; margin-bottom: 0%;padding-top:7%;padding-bottom:0%;padding-right:1%;font: bold 300% impact, verdana;border: 2px solid white; border-bottom:0px solid white;}
h2 {text-align: center;font: bold 150% verdana;padding-top:10%;}
p {text-align:center; font: bold 150% verdana; }
div.correctmain {background: url(elembackground.jpg); float: left; border: 2px solid white; width: 75%; height: 81%;padding-left: 1em; padding-right: 1em; margin-right: 7px;padding-bottom: 10%;}
div.optionbar {white-space:nowrap;display:block; float:left;border: 2px solid white; font-family:impact;font-size:100%; color: black;width:96%;;margin-bottom:0;}
div.h {font-size:100%;text-align:center;width:20.1%;background: url(elembackground.jpg);display: inline;border-left: 1px solid white; padding-left:6.5%;padding-right:6.7%;}
div.r{text-align:center;width:20.1%;background: url(elembackground.jpg);display: inline;border-left: 1px solid white;padding-left:6.6%;padding-right:6.6%;}
div.g {text-align:center;width:20.1%;background: url(elembackground.jpg);display: inline;border-left: 1px solid white;padding-left:6.6%;padding-right:6.6%;}
div.c {text-align:center;width:20.1%;background: url(elembackground.jpg);display: inline;border-left: 1px solid white;padding-left:6.6%;padding-right:6.6%;}
div.a{text-align:center;width:20.1%;background: url(elembackground.jpg);display: inline;border-left: 1px solid white;padding-left:6.5%;padding-right:6.5%;}
a.options {text-decoration: none;background:none;}
a.options:visited {color: black;background:none;}
a.options:hover {color: white;background:none;}
a.options:link {color:black;background:none;}As I said any help would be appreciated this is driving me mad!!
Thanks in advance.