Irritating problem, mixing pixel and percentage widths [Archive]

Troutnut

12-20-2004, 07:28 PM

I'm trying to create a header bar with some navigational links.

The basic idea is that I have a little banner image about 400 pixels wide on the left. To the right of it, I have 5 navigational links listed horizontally. I want them to be evenly spaced across the rest of the page, regardless of its width. I could do this with percentages if I had them in a parent element equal to the width of the page minus the width of the image to the left.

So basically, I know this isn't actual CSS syntax, but I'm looking for the functional equivalent of saying: #linkContainer{width:100%-400px;}

Anybody know a good way to do something like this?

This would be easy with a table, but I'm trying to stick to CSS for layout and tables only for tabular data.

rmedek

12-20-2004, 08:03 PM

How about this? (only tested in ff osx)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>example</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}

body, html {
height: 100%;
}

body {
font: 11px verdana, arial, sans serif;
}

#wrapper {
height: 100%;
width: 100%;
background-color: #ccc;
}

#header h1 {
font-size: 11px;
display: block;
height: 50px;
width: 400px;
text-align: center;
line-height: 50px;
background-color: #666;
}

#header ul {
list-style-type: none;
position: relative;
top: -52px;
border: dotted 1px #fff;
margin-left: 400px;
}

#header li {
width: 20%;
float: left;
text-align: center;
line-height: 50px;
}

#content {
margin: 10px;
}

a {
display: block;
color: #000;
text-decoration: none;
}

a:hover { background-color: #fff; }

</style>
</head>

<body>

<div id="wrapper">
<div id="header">
<h1>pretend this is an image</h1>
<ul>
<li><a href="#">link one</a></li>
<li><a href="#">link two</a></li>
<li><a href="#">link three</a></li>
<li><a href="#">link four</a></li>
<li><a href="#">link five</a></li>
</ul>
</div>

<div id="content">
<p> testy test</p>
</div>
</div>

</body>
</html>

Just an idea...