Trouble displaynig 3 divs inline

HTML & CSS
1

Hi, I had some great help from someone here to get my 3 divs displaying inline a while ago, but I have a follow up question now…

It is all working fine still, but I encountered a problem with movies that have names that are too long: the text extends over the other divs instead of wrapping down.

Here is my code:


<div id="wishlist">
	
	<div id="wishlistmovie">
		movie names are echoed here
	</div>
					
	<div id="wishlistdate">
		movie dates are echoed here
	</div>
			
	<div id="wishlistgenre">
		genres are echoed here
	</div>
	
	<br/>
	
</div>

And here is how I am styling it:


#wishlist {
width: 640px;
height: 100%;
margin-left: auto;
margin-right: auto;
border: solid 1px black;
background: #DDDDDD;
overflow: hidden;
}
#wishlistmovie {float: left; width: 440px;}
#wishlistdate {float: left; width: 100px;}
#wishlistgenre {float: left; width: 100px;}

Which outputs a page like this:


Moviename                    Date    Genre
Awesome Movie 01             060902   Action
Awesome Movie 02             060902   Action

etc.

If the genre is too long for its div, it wraps down and stays within the genre div, which is good.

But if the movie name is too long, it overlaps date/genre, which is bad.

Does anyone have any ideas on how to fix this?

I also have a similar div/style setup to align the headings ‘moviename’, ‘date’ and ‘genre’… but I don’t think that affects my problem.

2

That seems unlikely with the code you’ve posted, unless the movie name is one, long, unbroken name, which doesn’t seem to be the case. It might be something else on your page (or in your CSS) making that happen. Can you post a full example page with CSS embedded?

Using the code you posted, the text in the movie name box wraps just fine.

3

hm, you’re right, it is only happening when the name is too long AND unbroken! is there any way to fix that?

If I still need a full example I’ll work on putting one together.

4

I’m amazed that a movie title can consist of one word more that 640px long. What’s going on there? That seems more than odd.

5

What if someone released a movie tomorrow called AAAAAAAAAHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH!!!

That’s the point, there is an issue there and I’m curious how to fix it, regardless of if I will see it right now…

6

It’s likely to be such a flop at the box office that you can safely ignore it. :stuck_out_tongue:

Well, it’s a single word, so why would it want to wrap? If you put in a hyphen, it would do so. If your main objective is to stop the word overlapping other parts of the site, you could give the container overflow: hidden; , but that would make part of the word inaccessible. Or you could give the container overflow: scroll, and a scroll bar would appear, letting users scroll to see the end of the word. But again, it’s an odd hypothetical, really, and not something I would worry about much.

7

You can break unbroken text using this property.

#element{word-wrap:break-word}

Just apply it to the appropriate element and it will break unbroken text in all modern browsers.

Note that if you have some floats going to two lines deep then you will have wrapping issues and the float will snag. You will need to wrap each row of floats in a div and apply clear:both to that parent so that each set of three start on a new line.

Or alternatively use display:inline-block instead of floats but you will need to hack for IE6 and 7 (see the note about inline-block here).

8

Whoops, sorry; I’ve never seen that before. Be darned. Thanks Paul. That could come in very handy. :slight_smile:

9

It was previously an IE only code but has now become part of the spec and modern browsers all support it. :slight_smile:

10

Thank you both for your help. :slight_smile:

Paul, that works perfectly… never knew about that! Very useful, thank you.

11