468,316 Members | 1,992 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,316 developers. It's quick & easy.

Problem with overflow on inline list

Hi All,

I'm trying to present a list of short text items in an inline style,
flowing over more than one line if necessary. Each item should be in a
fixed-width box. The following code does most of what I want except
for the fact that the list item width isn't honoured and the items
that flow onto the second and subsequent lines actually overlap the
first line (because the top-margin isn't being honoured).

<html>
<head>
<title>Joblist</title>
<style>

#joblist {
list-style: none;
margin-left: 5%;
width: 80%;
border: 1px solid #ccc;
padding: 5px 5px;
}

#joblist li {
display: inline;
border: 1px solid gray;
background-color: #eee;
padding: 2px 5px;
margin: 2px 5px;
width: 75px;
}

</style>
</head>
<body>

<ul id="joblist">
<li>FTD21</li>
<li>MSD10</li>
<li>SAD01</li>
<li>SAD13</li>
<li>SAD59</li>
<li>SAD64</li>
<li>SAD69</li>
<li>SAD70</li>
<li>SKD*</li>
<li>SKW*</li>
<li>STD63</li>
<li>STD64</li>
<li>TRD04</li>
<li>TRD07</li>
<li>TRD19</li>
<li>RMD196</li>
</ul <!-- joblist -->

</body>
</html>

If you remove the "display: inline;" instruction you'll see the kind
of effect I'm after but without the actual inline behaviour.

Can anyone suggest a reason why I'm getting this result?

Thanks

Steve

Apr 4 '07 #1
2 2943
Scripsit st***********@tesco.net:
The following code does most of what I want except
for the fact that the list item width isn't honoured
According to CSS specifications, the width property does not apply to inline
elements.

As a workaround, set float: left for the list items, and set clear: both for
the element after the list.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Apr 4 '07 #2
Jukka K. Korpela wrote:
Scripsit st***********@tesco.net:
>The following code does most of what I want except
for the fact that the list item width isn't honoured

According to CSS specifications, the width property does not apply to
inline elements.

As a workaround, set float: left for the list items, and set clear: both
for the element after the list.

If you use float left you'll probably lose the border in #joblist

#joblist {
list-style: none;
margin-left: 5%;
border: 1px solid #ccc;
padding: 5px 5px;
}
Apr 4 '07 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by books1999 | last post: by
2 posts views Thread by george.leithead | last post: by
7 posts views Thread by Nik | last post: by
42 posts views Thread by thomas.mertes | last post: by
1 post views Thread by innivive | last post: by
reply views Thread by NPC403 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.