By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,767 Members | 1,255 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,767 IT Pros & Developers. It's quick & easy.

Problem with overflow on inline list

P: n/a
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
Share this Question
Share on Google+
2 Replies


P: n/a
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

P: n/a
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.