HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <div id="menu"> menu </div> <div id="lefttop"> lefttop </div> <div id="banner"> banner </div> <div id="leftcontent"> leftcontent</div> <div id="rightcontent"> rightcontent </div> <div id="centercontent"> Children are our future! The opportunity to influence children for the kingdom of God has never been greater than in India today. St. John’s Matriculation School made use of this opportunity and is run since 1996. Its humble beginning had just 18 students and 2 teachers. Since then constant planning is being made in order to help the students, parents and the community in the best possible ways Children are our future! The opportunity to influence children for the kingdom of God has never been greater than in India today. St. John’s Matriculation School made use of this opportunity and is run since 1996. Its humble beginning had just 18 students and 2 teachers. Since then constant planning is being made in order to help the students, parents and the community in the best possible waysChildren are our future! </div> <!--<div id="footer">footer</div>--> </div> </body> </html> CSS: #container{ width:780px; border:1px solid #808080; background-color:red; margin:auto;} #menu{ height:40px; background-color:white; } #lefttop{ float:left; width:217px; height:207px; background-color:blue; } #banner{ float:right; width:563px; height:207px; background-color:green; } #leftcontent{ width:217px; height:454px; background-color:darkgreen; float:left; } #centercontent{ background-colorrange;/*problem Area*/ margin:0px 171px 0px 217px; } #rightcontent{ float:right; width:171px; height:454px; background-colorurple; } /* #footer{ background-color:gray; height:25px; clear:both; } */
Uhm... No, it shouldn't come down - you aren't declaring a height on it... so it shouldn't come down. my advice, fake the desired behavior by putting the desired background color on #container to 'hide' that it's not extending down. as to the margin issues, you aren't nulling your margins and padding. NOT that I would EVER fix the height of a content area that way. I'd put a faux columns background image on #container and remove the backgrounds and heights from #leftContent, #rightContent and #centerContent <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head> <title> Column Test </title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" > <style type="text/css"> * { margin:0; padding:0; } p { padding:0.5em; } #container { width:780px; border:1px solid #888; background:orange; margin:auto; } #menu{ height:40px; background:white; } #lefttop{ width:217px; height:207px; background:blue; } #banner{ height:207px; margin:-207px 0 0 217px; /* avoiding float avoids headaches */ background:green; } #leftContent{ width:217px; float:left; display:inline; /* fix double margin bug */ /* remove these if using background-image on #columnWrapper instead */ position:relative; margin-left:-217px; } #columnWrapper{ /* remove these if using background-image instead */ border-left:217px solid darkgreen; border-right:171px solid purple; } #rightContent{ float:right; display:inline; width:171px; /* remove these if using background-image on #columnWrapper instead */ position:relative; margin-right:-171px; } #footer { clear:both; height:25px; position:relative; /* just in case depth sorting */ background:gray; /* remove this if using background-image on #columnWrapper instead */ margin:0 -171px 0 -217px; } </style> </head><body> <div id="container"> <div id="menu"> menu </div> <div id="lefttop"> lefttop </div> <div id="banner"> banner </div> <div id="columnWrapper"> <div id="leftContent"> leftcontent </div> <div id="rightContent"> rightcontent </div> <div id="centerContent"> <p> Children are our future! The opportunity to influence children for the kingdom of God has never been greater than in India today. St. John’s Matriculation School made use of this opportunity and is run since 1996. Its humble beginning had just 18 students and 2 teachers. Since then constant planning is being made in order to help the students, parents and the community in the best possible ways </p><p> Children are our future! The opportunity to influence children for the kingdom of God has never been greater than in India today. St. John’s Matriculation School made use of this opportunity and is run since 1996. Its humble beginning had just 18 students and 2 teachers. Since then constant planning is being made in order to help the students, parents and the community in the best possible ways </p> </div> <div id="footer"> footer </div> <!--#columnWrapper --></div> <!-- #container --></div> </body></html> Code (markup): Uses borders for the colours - if you want to style those column backgrounds with images instead of solid colours, remove the areas I commented and make all three columns a single image, and slap it on #columnWrapper (so called Faux columns) - or you could put it on #container and delete #columnWrapper alltogether.
Thank you for your wonderful help... you taught me a lot..... continue your help for the new guys God Bless You