Content spills over div

HTML & CSS
1

I know there’s a standard way to fix this but how do you prevent content from spilling over a div and making sure it stays contained inside it?

I’ve got the typical here’s my div with a bunch of p tags in it but the length of the content inside is spilling outside the boundaries of my div.

so I’ve got a div called resultContainer and then a bunch of p tags set to inline:

        #resultContainer
        {
            border: 1px solid #ddd;
            margin: 20px 0px 0px 130px;
            width: 300px;
            height: 300px;
        }
        
        #resultContainer p
        {
            display: inline;
            margin: 5px;
            height: 300px;
        }

so the p tags are overflowing out of the container div and flowing right.

<div id=“resultContainer”>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
…
</div>

2

thanks, I guess I just don’t understand inline-block still. Worked.

3

Have a look through Paul’s Inline-Block Article.

It was written in 08 but browser support is much better now. IE6/7 will need the workarounds to comply though.

Here is a few more -
http://gtwebdev.com/workshop/layout/inline-block-gallery.php

http://www.ruzee.com/blog/2007/05/align-list-items-horizontally-with-css/

4

Why did you set your <p> to display:inline and then expect it to take a height and vertical margins. Only block levels can do that, which is what a <p> is by default.

so the p tags are overflowing out of the container div and flowing right.
Try setting the p tags as display:inline-block with white-space:nowrap; on the parent.
That way they can take dimensions and stack to the right, if that is what you intend to do.