WemiBrainalar
New Member
Im creating a webpage wit basic div elements and basic css styling. However i find that whenever I place an excessive amount of content in one of these div tags the content is displayed incorrectly event with the use of the \[code\]overflow: auto;\[/code\] technique.LINK TO VISUAL PROBLEM: http://i.stack.imgur.com/FGCQk.jpgTHE HTML:\[code\] <!doctype html> <html lang="eng"> <head><title> Car Hunt Jamaica || The Hunt Is On! </title><meta name="title" content="Car Hunt Jamaica"><meta name="description" content="Buy and Sell New and User Motor Cars In Jamaica"><meta name="keywords" content="Cars, Buses, Trucks, Buy, Vehicles"><link href="http://stackoverflow.com/questions/13877651/styling/desktop.css" rel="stylesheet" type="text/css"></head><body><div id="main_body"><div id="header_left"> <p> header left</p> </div> <!-- header left ends here --><div id="header_right"> <p> header right </p> </div> <!-- header right ends here --><div id="right_sidebar"> <p> right side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side barright side bar </p></div> <!-- Right sidebar ends here --><div id="container"> <p> container </p></div> <!-- container ends here --></div> <!-- Main Body Ends --><div id="footer"><p> Footer </p></div> <!-- Footer ends here --></body></html> <!-- HTML page ends here -->\[/code\]THE CSS:\[code\] @charset "utf-8";/* CSS Document */body{ background-color:#000; overflow-y: auto;}#main_body{ background-color:#fff; width: 990px; margin-top: 50px; margin-left:auto; margin-right:auto; height: 600px;}#header_left{ background-color:#F00; width: 230px; height: 70px; float: left;}#header_right{ background-color:#009; width: 760px; height: 70px; float:right;}#footer{ background-color:#666; width: 990px; height: 30px; margin-top:0px; margin-left:auto; margin-right:auto;}#right_sidebar{ margin-top: 30px; margin-left: 20px; background-color:#FF0; float: left; width: 230px;}#container{ background-color:#0C0; width: 660px; float: right; margin-top: 30px; overflow-y: auto; margin-right: 20px;\[/code\]Dont mind the horrible colors its just so i can identify each div tag correctly