December 15, 201015 yr Copy and paste code below - you should see that the container_footer border overflows onto container_all. Why does it do this? Also, read the post on 'How to center content using CSS' and have not been able to replicate its effect - any reasons why it doesnt work in this code either?? <html> <head> <style type="text/css" media="screen" title=""> body { text-align:center; } div.container_all { text-align:left; border: solid black 0.24em; width: 1024px; padding: 0.24em; } div.container_banner, div.menu_navigation { margin-bottom: 0.24em; } div.container_banner, div.menu_navigation, div.menu_accessibility, div.intro, div.container_content, div.container_footer { padding:0.24em; width: 98%; } div.container_footer { margin-top: 0.24em; border: solid red 2.36em; } </style> </head> <body > <div class="container_all"> <div class="container_banner"> banner here </div><!-- end of div class container_banner --> <div class="menu_navigation"> menu navigation here </div><!-- end of div class menu_navigation --> <div class="menu_accessibility"> accessibility here </div><!-- end of div class menu_accessibility --> <div class="intro"> intro here </div><!-- end of div class intro --> <div class="container_content"> content here </div><!-- end of div class container_content --> <div class="container_footer"> footer here </div><!-- end of div class container_footer --> </div><!-- end of div class container_all --> </body> </html>
December 18, 201015 yr I posted a reply on this post. dont know why it got deleted. For the footer. remove the width of footer div it will automatically adjust itself and to make the container div center align. here is the style div.container_all { margin: 0 auto; }
December 22, 201015 yr Copy and paste code below - you should see that the container_footer border overflows onto container_all. Why does it do this? Also, read the post on 'How to center content using CSS' and have not been able to replicate its effect - any reasons why it doesnt work in this code either?? <html> <head> <style type="text/css" media="screen" title=""> body { text-align:center; } div.container_all { text-align:left; border: solid black 0.24em; width: 1024px; padding: 0.24em; } div.container_banner, div.menu_navigation { margin-bottom: 0.24em; } div.container_banner, div.menu_navigation, div.menu_accessibility, div.intro, div.container_content, div.container_footer { padding:0.24em; width: 98%; } div.container_footer { margin-top: 0.24em; border: solid red 2.36em; } </style> </head> <body > <div class="container_all"> <div class="container_banner"> banner here </div><!-- end of div class container_banner --> <div class="menu_navigation"> menu navigation here </div><!-- end of div class menu_navigation --> <div class="menu_accessibility"> accessibility here </div><!-- end of div class menu_accessibility --> <div class="intro"> intro here </div><!-- end of div class intro --> <div class="container_content"> content here </div><!-- end of div class container_content --> <div class="container_footer"> footer here </div><!-- end of div class container_footer --> </div><!-- end of div class container_all --> </body> </html> Hi, Use below code, this will solve all your problems <html> <head> <style type="text/css" media="screen" title=""> body { text-align:center; } div.container_all { text-align:left; border: solid black 0.24em; width: 1024px; padding: 0.24em; margin:0px auto; } div.container_banner, div.menu_navigation { margin-bottom: 0.24em; } div.container_banner, div.menu_navigation, div.menu_accessibility, div.intro, div.container_content, div.container_footer { padding:0.24em; width: 98%; } div.container_footer { margin-top: 0.24em; border: solid red 2.36em; width:942px; } </style> </head> <body > <div class="container_all"> <div class="container_banner"> banner here </div><!-- end of div class container_banner --> <div class="menu_navigation"> menu navigation here </div><!-- end of div class menu_navigation --> <div class="menu_accessibility"> accessibility here </div><!-- end of div class menu_accessibility --> <div class="intro"> intro here </div><!-- end of div class intro --> <div class="container_content"> content here </div><!-- end of div class container_content --> <div class="container_footer"> footer here </div><!-- end of div class container_footer --> </div><!-- end of div class container_all --> </body> </html>
Create an account or sign in to comment