<li><p> is running out of parent div

HTML & CSS
1

I have a <div> that hold different information coming from the database. One is a horizontal list with dates. It works great until there are to many dates in the list. When that is the case the list just extends outside of the parent <div>. Is there a way to avoid that?

This is the html structure:


<ul class="detail_titles">
  <li>
    <p><b>Dates:</b> <span>#variables.datestr#</span></p>
  </li>
</ul>

Note: This happens in Chrome and IE. In FF it works fine.

Any ideas?

Thank you in advance.

2

You’ll need to show CSS how you are making the div contain the horizontal list items and how you are making the list items horizontal. And where do they pop out of the div? From the side? the bottom?

3

Sorry Stomme poes. This is the css regarding this part:


.detail_titles {
	width: 369px;
	margin-bottom: 20px;
	float: left;
	font-size: 100%;		
}

.detail_titles li {
  width: 369px;
  float: left;
  color: #86bd03;
  list-style: none;
  margin:0 0 20px;
}

.detail_titles p {
  margin:0 !important;
  padding:0 0 0 6em;	
	line-height: 1.1;
}

.detail_titles p b{
  width:5.5em;
  margin-left:-6em;
  float:left;
  clear:left;
}

.detail_titles li span {
    display: inline-block;
    color: #1d6406
}

.listing_details li span a {
	font-weight: bold;
}

and they pop out to the right.

Thank you

4

Can you show a working demo of the problem as I don’t see anything wrong with the above snippet ?

5

I was unable to fault your code, i tried it in Firefox, Chrome and IE and in all cases it worked perfect for me.

Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)

6

Hi donboe,

Is your database running the dates together without whitespace? If so that could be the problem as it would basically be treating the dates as one word. But then FF should show the problem too.

If you can’t post a link to the page for some reason then post the generated html of the problem area.

If it is acting like one word then you could use the word-break property.

<ul class="detail_titles">
  <li>
    <p><b>Dates:</b> <span>01-21-11,02-22-11,03-23-11,04-24-11,05-25-11</span></p>
  </li>
</ul>

.detail_titles li span {
    display: inline-block;
    [COLOR=Blue]word-break:break-word;[/COLOR]
    color: #1d6406
}
7

Correction, actually I had meant to say [FONT=Courier New]word-wrap[/FONT]


.detail_titles li span {
    display: inline-block;
    [COLOR=Blue]word-wrap:[/COLOR]break-word;
    color: #1d6406
}
8

Hi Paul you can see the problem here

Like I said in Firefox it goes to the next line when the width is reached, but in Chrome and IE it just pops out of the <div>

9

Hi donboe:
yup, it’s what Ray was talking about.

The reason it’s different per browser is, Firefox for example will break a line where it sees a / but for example Opera won’t (we see this with long URLs all the time).

I would use Ray’s word-wrap: break-word and then check which browsers that doesn’t work in (if you have enough users with browsers where that doesn’t work, you could stoop to using Javascript to look for the / and add a ’ ’ in there).

Or, get your back-end to do that when it grabs from the database. Spaces after the commas would make the dates more readable anyway, and all browsers can wrap on a space.

10

Support is very good for word-wrap:break word now and all versions of IE support it and all modern browsers also.

11

Thanks Rayzur and Paul but I can’t get it to work as you can see here any other suggestions?

12

Hi,
When they upgraded the forums it looks like it reformatted the code snippet in my last post.

You have the the word-wrap nested in the [ COLOR=Blue] [ /COLOR] tags in your layout.css

.detail_titles li span {
    display: inline-block;
    [COLOR=Blue]word-wrap:[/COLOR]break-word;
    color: #1d6406
}

It should work just fine for you if you remove the color tags

.detail_titles li span {
    display: inline-block;
    word-wrap: break-word;
    color: #1d6406
}