View Full Version : Expanding navigation w/ div size

01-23-2008, 10:16 PM
I'm currently creating a CSS based layout that expands or contracts depending on the div size. My navigation is image based, with each link being a rollover image. Is there a way to increase/decrease the space between the images depending on the size of the div, so that everything seems evenly spaced? I've searched everywhere - the obvious thing to do, I thought, would be to make the div justify aligned but this does nothing. Any help is very much appreciated!

Thanks so much. :thumbsup:

01-23-2008, 10:28 PM
What's wrong with a fixed space and no height?

01-23-2008, 11:05 PM
Oh, I'm sorry, I should have mentioned that it's horizontal navigation. x_x Sorry, I'm blond.

01-24-2008, 12:37 AM
try this out.

you'll have to tinker with the % and the min-width (as well as making min-width work in IE6) but it should work out for you.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body, html {
padding: 0;
margin: 0;
body {
background: #f93cdc;
text-align: center;
font: 1em arial;
color: #000;
#holder {
width: 80%;
margin: 100px auto;
background: #fdc;
padding: 16px;
text-align: left;
min-width: 400px;

ul {
list-style: none;
margin: 0;
padding: 0;
text-align: center;

li {
display: inline;
padding: 4px;
background: #ff9d9d;
margin: 0 3%;
<div id="holder">
<li><a href="#x">image</a</li>
<li><a href="#x">image</a</li>
<li><a href="#x">image</a</li>
<li><a href="#x">image</a</li>
<li><a href="#x">image</a</li>