[html] Text not wrapping in p tag

I have two floated divs, side by side, with p tags inside. The text within the p tags does not wrap and just overflows the container, as you can see in the text under the images:

My HTML looks like so:

        <div class="submenu">
            <h3>Destinations in Europe</h3>
            <ul>
                <li><a href="#">dfgdgdgfgdg</a></li>
                <li><a href="#">dfgdgdgfgdg</a></li>
                <li><a href="#">dfgdgdgfgdg</a></li>
                <li><a href="#">dfgdgdgfgdg</a></li>
            </ul>
            <h3>Features</h3>
            <div>
                <img src="/assets/images/o/menu/city-feat-one.jpg" />
                <h4>blahblah</h4>
                <p>
                    khkhjhjkhkyhkighkjfkhkiyhohhjkhjlhkluoiulohlhjhiououhljhiououhljhiououhljhiououhljhiououhljhiououhl
                </p>
            </div>
            <div>
                <img src="/assets/images/o/menu/city-feat-two.jpg" />
                <h4>blahblah</h4>
                <p>
                    khkhjhjkhkyhkighkjfkhkiyhohhjkhjlhkluoiulohlhjhiououhl
                </p>
            </div>           
        </div>

My CSS:

#rb-menu-com li .submenu > div { 
    width:48%;
    float:left;
    position: relative;
}

#rb-menu-com li .submenu div p {
    color:#fff;
    margin: 0;
    padding:0;
    width:100%;
    position: relative;
}

#rb-menu-com li .submenu div img {
    border:1px solid #fff;
}

Has anyone experienced this before? I haven't!! Driving me mad!

add float: left property to the image.

#rb-menu-com li .submenu div img {
    border:1px solid #fff;
    float:left;
}

EASY

p{
    word-wrap: break-word;
}

Give this style to the <p> tag.

p {
    word-break: break-all;
    white-space: normal;
}

The solutions is in fact

p{
    white-space:normal;
}

You can change the break behaviors by modifying, word-break property

p{
    word-break: break-all; // will break at end of line 
}

break-all: Will break the string at the very end, breaking at the last word word-break: is more of pretty brake, will break nicely for example at ? point normal: same as word-break

This is a little late for this question but others might benefit. I had a similar problem but had an added requirement for the text to correctly wrap in all device sizes. So in my case this worked. Need to setup the view port.

 .p
   {
   white-space: normal;
    overflow-wrap: break-word;
    width: 96vw;
   }

You can use word-wrap to break words or a continuous string of characters if it doesn't fit on a line in a container.

word-wrap: break-word;

this will keep breaking lines at appropriate break points unless a single string of characters doesn't fit on a line, in that case it will break.

JSFiddle

Adding width: 100%; to the offending p element solved the problem for me. I don't know why it works.

This is not an answer to the question but as I found this page while looking to an answer to a problem that I had, I want to mention the solution that I found as it cost me a lot of time. In the hope this will be useful to others:

The problem was that text in a <p> tag would not fold in the div. Eventually, I opened the inspector and noticed a 'no breaking space entity' between all the words. My editor, vi, was just showing normal blank spaces (some invisible chr, I don't know what) but I had copied pasted the text from a PDF document. The solution was to copy a blank space from within vi and replace it with a blank space. ie. :%s/ / /g where the blank to be replaced was copied from the offending text. Problem solved.

To anyone still struggling, be sure to check and see if you've set a line-height value on the font in question: it could be overriding the word wrap.

That is because you have continuous text, means single long word without space. To break it add word-break: break-all;

.submenu div p {
    color:#fff;
    margin: 0;
    padding:0;
    width:100%;
    position: relative; word-break: break-all; background:red
}

DEMO

For others that find themselves here, the css I was looking for was

overflow-wrap: break-word;

Which will only break a word if it needs to (the length of the single word is greater than the width of the p), unlike word-break: break-all which can break the last word of every line.

overflow-wrap demo