(css newbie) - Widths

Giganews Newsgroups
Subject: (css newbie) - Widths
Posted by:  TheChillPill (no@spam.please)
Date: Thu, 15 Jul 2004

I'm working to get rid of tables completely, so my new site is to be
completely CSS-based.  Now, I have a problem with a navigational element at
the top of the page.  On the left-hand side of the page I have got the menu,
then at the very top I have a smaller menu (a header if you like).  The menu
to the left is a fixed width of 294px, and I would like the top header to
basically cover the whole width (from the menu on anyway).

I have set the header to 100%, however it is causing a considerable
horizontal scroller - both in IE6 & Firefox (both running under WinXP).

Heres the CSS code for both elements;

<!--- Start CSS --->
body {
margin: 0;
font-family: Trebuchet MS, sans-serif;
font-size: 70%;
background: #FFF;
color: #333;
}

a:link { color: #006; }
a:visited { color: #666; }
a:hover { color: #F7931D; }
a:active { color: #000;}

..logo {
position: relative;
text-align: left;
}
..leftnav {
position: relative;
background: #E5CCCA;
width: 294px;
border-right: 1px solid #942923;
height: 50em;
}
..navbar {
position: absolute;
left: 295px;
top: 0px;
background: url(img/navbg.gif);
width: 90%;
border-bottom: 1px solid #A8A9AD;
text-align: right;
}
<!--- End CSS --->

And, this is how it's inserted in the HTML;

<!--- Start HTML --->

<html>
<head>
<title>PageTitle</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="leftnav"><div class="logo"><img src="img/logo.png" />
</div></div>
<div class="navbar">xxx</div>
</body>
</html>

<!--- End HTML --->

I would be grateful of any help on this one, before I have no hair left! ;-)

Thanks,

Lee

Replies