hbibadialo
New Member
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:\[code\] <div class="submenu"> <h3>Destinations in Europe</h3> <ul> <li><a href="http://stackoverflow.com/questions/14477156/#">dfgdgdgfgdg</a></li> <li><a href="http://stackoverflow.com/questions/14477156/#">dfgdgdgfgdg</a></li> <li><a href="http://stackoverflow.com/questions/14477156/#">dfgdgdgfgdg</a></li> <li><a href="http://stackoverflow.com/questions/14477156/#">dfgdgdgfgdg</a></li> </ul> <h3>Features</h3> <div> <img src="http://stackoverflow.com/assets/images/o/menu/city-feat-one.jpg" /> <h4>blahblah</h4> <p> khkhjhjkhkyhkighkjfkhkiyhohhjkhjlhkluoiulohlhjhiououhljhiououhljhiououhljhiououhljhiououhljhiououhl </p> </div> <div> <img src="http://stackoverflow.com/assets/images/o/menu/city-feat-two.jpg" /> <h4>blahblah</h4> <p> khkhjhjkhkyhkighkjfkhkiyhohhjkhjlhkluoiulohlhjhiououhl </p> </div> </div>\[/code\]My CSS:\[code\]#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;}\[/code\]Has anyone experienced this before? I haven't!! Driving me mad!