As the title implies my problem is that the content doesn't stay inside the main container (no floats are used).Yes, I know there are a lot of questions regarding this matter here on Stack, though none of the solutions I've tried works for me.What I've tried:
Overflow: hidden on "#infoBox"
A div with "clear:both" as the last node in "#infoBox"
position: relative in the CSS of '#infoBox'
HTML:\[code\]<div id="infoBox"> <div id="statsDiv"> <div id="nrOfCrimes"> <div id="nrOfCrimesGraphDiv"> //... code for jQuery Visualize (graphs) </div> <ul> //... li's ... </ul> </div> <div id="crimesPerMonth"> <div id="crimesPerMonthGraphDiv"> //... code for jQuery Visualize (graphs) </div> <ul> //... li's ... </ul> </div> </div></div>\[/code\]CSS:\[code\]#infoBox { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; width: 89%; background: #fbfbf7; margin: 0px auto; margin-bottom: 40px; padding-left: 40px; padding-right: 40px;}#nrOfCrimesGraphDiv { position: absolute; top: -100px; left: 300px;}#crimesPerMonthGraphDiv { position: absolute; top: -80px; left: 300px;}\[/code\]Note: No CSS is specified for "#statsDiv", "#nrOfCrimes" and "#crimesPerMonth".As you can see on this image the elements floats outside the main container:
