6 replies [Last post]
muzishun
Offline
Enthusiast
Lawrence, KS
Last seen: 14 years 48 weeks ago
Lawrence, KS
Timezone: GMT-6
Joined: 2005-02-08
Posts: 106
Points: 0

I'm trying to get a list to display the way I want it to, and it is frutstrating me. I've got several items that need to be a specific size, then I want the last item to take up the rest of the space. Should I use min- and max-width for this, then use some scripting to make IE behave?

I found this script here; I'd like to know if anyone has experience using it. It basically gives the min- and max-width capabilities to IE.

Without resorting to this, is there a way to get one list item to take up the rest of the space in a div or ul? I have the div set to 96% of the page, the ul is 100% of the div, and I just want to have one variable column with several fixed columns.

Bill Parrott
Co-Owner and Co-Founder
Eternal Second Designs
http//www.EternalSecond.com/

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 18 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

width: "the rest" ?

Unless you're otherwise limiting it, a block level element will take all the width available to it.

If you've got something that acts differently, make us a minimal test case that demonstrates the effect.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

muzishun
Offline
Enthusiast
Lawrence, KS
Last seen: 14 years 48 weeks ago
Lawrence, KS
Timezone: GMT-6
Joined: 2005-02-08
Posts: 106
Points: 0

width: "the rest" ?

As long as the list items are displayed block, they're fine, but when I go to float them or display them inline, the widths shrink to only what I set or what is necessary.

Here's a test page that I'm trying to work with. My goal is to get the first list item (first column) to take up all of the available space, then have the last few columns stay a fixed width on the side.

<!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" xml:lang="en">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" />
<title>Web Page Template</title>
<style type="text/css">
<!--/*--><![CDATA[/*><!--*/
* {margin: 0; padding: 0; border: 0;}
body {background-color: white; color: black;}
div#container {width: 80%;}
ul.testul {width: 100%; list-style-type: none; border: 1px solid green;}
ul.testul li {display: block; margin: 0 5px; border: 1px solid red;}
ul.testul li.class1 {width: auto;}
ul.testul li.class2 {width: 6em;}
ul.testul li.class3 {width: 6em;}
ul.testul li.class4 {width: 4em;}
ul.testul li.class5 {width: 8em;}
ul.testul li.class6 {width: 6em;}
ul.testul li.clear {clear: both; float: none; width: 0px; height: 0px;}
/*]]>*/-->
</style>
</head>
<body>
<div id="container">
<ul class="testul"
	><li class="class1">Longest</li
	><li class="class2">Fixed</li
	><li class="class3">Fixed</li
	><li class="class4">Fixed</li
	><li class="class5">Fixed</li
	><li class="class6">Fixed</li
	><li class="clear">&nbsp;</li
></ul>
</div>
</body>
</html>

This displays as it should, but as soon as I start bringing the items into a row together, the <li> without a set width shrinks to fit the word. I remember hearing something about "display: inline-block;", but didn't find it on the W3C specs, so I'm guessing it isn't widely supported yet.

Bill Parrott
Co-Owner and Co-Founder
Eternal Second Designs
http//www.EternalSecond.com/

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 18 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

width: &quot;the rest&quot; ?

The li without a set width, {width: auto;} (redundant) took the full available width. I have no clue what it is you're trying to do with the clear class. Nor is there any reason to specify {display: block;}. The list item is naturally a block element.

ul.testul li {
    margin: 0 5px; 
    border: 1px solid red;
    }

ul.testul li.class1 {width: auto;}

ul.testul li.class2 {width: 6em;}

ul.testul li.class3 {width: 6em;}

ul.testul li.class4 {width: 4em;}

ul.testul li.class5 {width: 8em;}

ul.testul li.class6 {width: 6em;}

ul.testul li.clear {
    clear: both; 
    float: none; 
    width: 0px; 
    height: 0px;
    }
============
<ul class="testul">
  <li class="class1">Longest</li>
  <li class="class2">Fixed</li>
  <li class="class3">Fixed</li>
  <li class="class4">Fixed</li>
  <li class="class5">Fixed</li>
  <li class="class6">Fixed</li>
  <li class="clear">&nbsp;</li>
</ul>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

muzishun
Offline
Enthusiast
Lawrence, KS
Last seen: 14 years 48 weeks ago
Lawrence, KS
Timezone: GMT-6
Joined: 2005-02-08
Posts: 106
Points: 0

width: &quot;the rest&quot; ?

Sorry. I guess I was kind of being vague. Yes, what I posted works. However, I want to either float the list items or display them inline. In both cases, the object with no set width defaults to a width of "just wide enough to contain the text". How can I prevent this?

Bill Parrott
Co-Owner and Co-Founder
Eternal Second Designs
http//www.EternalSecond.com/

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 18 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

width: &quot;the rest&quot; ?

If I get it now, you want a horizontal list where all but one item to be of a set size, while the one takes all available space. Correct?

Let the natural way things work to do it;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xml:lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      lang="en">
<head>
  <meta http-equiv="content-type"
        content="text/html; charset=utf-8" />
  <meta name="generator"
        content=
        "HTML Tidy for Linux/x86 (vers 12 April 2005), see www.w3.org" />
        
  <meta name="editor"
        content="Emacs 21" />
  <meta name="author"
        content="Gary Turner" />

  <title>a list</title>
<style type="text/css">
/*<![CDATA[*/

html, body {
    margin: 0;
    padding: 0;
    }

body {
    color: black;
    background-color: white;
    font: 100% georgia, geneva, serif;
    }

p {
    font-size: 1em;
    }

h1 {}

ul {
    border: 3px solid black;
    margin: 1em;
    padding: 0;
    list-style: none;
    }

li.cl2 {
    float: right;
    border-left: 3px solid black;
    width: 6em;
    }

li.cl3 {
    float: right;
    border-left: 3px solid black;
    width: 6em;
    }

li.cl4 {
    float: right;
    border-left: 3px solid black;
    width: 4em;
    }

li.cl5 {
    float: right;
    border-left: 3px solid black;
    width: 8em;
    }

li.cl6 {
    float: right;
    border-left: 3px solid black;
    width: 6em;
    }

/*]]>*/

</style>
</head>

<body>

<ul>
  <li class="cl6">class 6</li>
  <li class="cl5">class 5</li>
  <li class="cl4">class 4</li>
  <li class="cl3">class 3</li>
  <li class="cl2">class 2</li>
  <li class="cl1">class 1</li>
</ul>

</body>
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

muzishun
Offline
Enthusiast
Lawrence, KS
Last seen: 14 years 48 weeks ago
Lawrence, KS
Timezone: GMT-6
Joined: 2005-02-08
Posts: 106
Points: 0

width: &quot;the rest&quot; ?

Wow... that's so much simpler than I was trying to go with it. Thanks a million for the help.

Bill Parrott
Co-Owner and Co-Founder
Eternal Second Designs
http//www.EternalSecond.com/