jasonc Posted March 22, 2010 Share Posted March 22, 2010 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> body { margin: 0; padding: 0; width: 700px; border: 1px solid #555555; } #logo { float: left; background-image:url(mflogo.png); width: 136px; height: 139px; background-repeat: no-repeat; } #left { float: left; } #right { float: right; } input { font-size: 8pt; color: #333333; background-color: #FFFFFF; } div.center { text-align: center; } option.center { text-align: center; } a.nd { text-decoration: none; } #loginbox-text { color: #FF6600; } #loginbox { float:left; width:140px; /* the width here should be the same as the 'maincontent' id in 'style.css' file */ } #maincontent { padding-left:140px; } #main_left_container { width:50%; float:left; overflow:auto; } /* background: red; */ #main_left_content { padding: 10px; } /* background: yellow; */ #main_right_container { margin-left:50%; } /* background: blue; */ #main_right_content { padding: 10px; } /* background: green; */ #menubar { text-align: center; color: #FF0000; padding: 0; margin: 0; } #welcome_username { align: left; font-size: 30px; font-weight: bold; } .clear { height: 0; font-size: 1px; margin: 0; padding: 0; line-height: 0; clear: both; } #footertext1 { font-weight: normal; font-size: 10px; } #footertext2 { font-weight: normal; font-size: 12px; } </style> <link rel="stylesheet" type="text/css" href="style_extras_not_logged_in.css"> </head> <body> <div style="padding: 0; margin: 0; width: 700px; height: 141px; background-color: #333;"> <div style="float: left; height: 139px;"><img src="logo.png" alt="" height="139" width="136"> </div> <div><strong style="font-weight: normal; font-size: 2em; line-height: 1em;">Welcome</strong> </div> <div><strong style="font-weight: normal; font-size: 1.05em; font-weight: bold; line-height: .5em; color: #99FFFF;"> this and that</strong> </div> <div> </div> <div><strong style="font-size: .7em; line-height: 3.6em;">.com</strong> </div> </div><div id="menubar"> <!-- note: the menus are text for now but will be images later on, in case anyone queries the many spaces! --> <a href="" class="nd"><em>Home</em></a> <a href="" class="nd"><em>About</em></a> <a href="" class="nd"><em>change password</em></a> </div><div id="loginbox"> <form name="loginbox" method="post" action="auth.php"><div class="center">Username<br><input size="20" type="text" name="name"></div> <div class="center">Password<br><input name="password" type="password" size="20"></div> <div class="center"><input type="submit" value="Log In" name="login"><input type="reset" value="Reset" name="reset"></div> <div class="center"><a href="">forgot password</a></div> </form> </div><div id="maincontent"> <div id="main_left_container"> <div id="main_left_content"> left main content - left main content - left main content - left main content - left main content - left main content - left main content - left main content - </div> </div> <div id="main_right_container"> <div id="main_right_content"> right main content - right main content - right main content - right main content - right main content - right main content - right main content - right main content - right main content - right main content - right main content - right main content - right main content </div> </div> </div> <div class="clear"></div> <br><br> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/196154-body-tag-not-using-css-width/ Share on other sites More sharing options...
aeroswat Posted March 22, 2010 Share Posted March 22, 2010 Not 100% sure on this but I don't believe you can set width on the body. You can envelope everything in a div element that's inside the body and then set that div's width but it doesn't work for the body. Edit: I see that it doesn't work in the body for IE. Therefore my way that I told you above is the correct way to do it for cross platform compatibility. Many sites use what are called container divs. Might be a good idea for you to as well Quote Link to comment https://forums.phpfreaks.com/topic/196154-body-tag-not-using-css-width/#findComment-1030087 Share on other sites More sharing options...
haku Posted March 23, 2010 Share Posted March 23, 2010 It's generally considered polite to at least add a question to your post. And please use code tags. Quote Link to comment https://forums.phpfreaks.com/topic/196154-body-tag-not-using-css-width/#findComment-1030300 Share on other sites More sharing options...
jasonc Posted March 23, 2010 Author Share Posted March 23, 2010 yes i had missed out the question from my post sorry i thought that was in the top part already seems like i was not typing in the box after all, i shall check my post in preview mode from now on to make sure. i have now got this code which works but would like to have all the CSS in my style.css file and not having to use the style tag in my HTML code. the highlighted red parts are the new code i added to fix this body_container problem. but would like to have the styles out of my code and use ID or CLASS method. can anyone see what is wrong with my code that is causing the layout to move out of the body area when i use the ID method. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> body { margin: 0; padding: 0; width: 700px; border: 1px solid #555555; } #logo { float: left; background-image:url(mflogo.png); width: 136px; height: 139px; background-repeat: no-repeat; } #left { float: left; } #right { float: right; } input { font-size: 8pt; color: #333333; background-color: #FFFFFF; } div.center { text-align: center; } option.center { text-align: center; } a.nd { text-decoration: none; } #loginbox-text { color: #FF6600; } #loginbox { float:left; width:140px; } #maincontent { padding-left:140px; } #main_left_container { width:50%; float:left; overflow:auto; } /* background: red; */ #main_left_content { padding: 10px; } /* background: yellow; */ #main_right_container { margin-left:50%; } /* background: blue; */ #main_right_content { padding: 10px; } /* background: green; */ #menubar { width: 700px; text-align: center; color: #FF0000; padding: 0; margin: 0; } #welcome_username { align: left; font-size: 30px; font-weight: bold; } .clear { height: 0; font-size: 1px; margin: 0; padding: 0; line-height: 0; clear: both; } #footertext1 { font-weight: normal; font-size: 10px; } #footertext2 { font-weight: normal; font-size: 12px; } </style> <link rel="stylesheet" type="text/css" href="style_extras_not_logged_in.css"> </head> <body> <div style="padding: 0; margin: 0; width: 700px; background-color: #777;"> <div style="padding: 0; margin: 0; width: 700px; height: 141px; background-color: #333;"> <div style="float: left; height: 139px;"><img src="logo.png" alt="" height="139" width="136"> </div> <div><strong style="font-weight: normal; font-size: 2em; line-height: 1em;">Welcome</strong> </div> <div><strong style="font-weight: normal; font-size: 1.05em; font-weight: bold; line-height: .5em; color: #99FFFF;"> this and that</strong> </div> <div> </div> <div><strong style="font-size: .7em; line-height: 3.6em;">.com</strong> </div> </div> <div id="menubar"> <!-- note: the menus are text for now but will be images later on, in case anyone queries the many spaces! --> <a href="" class="nd"><em>Home</em></a> <a href="" class="nd"><em>About</em></a> <a href="" class="nd"><em>change password</em></a> </div><div id="loginbox"> <form name="loginbox" method="post" action="auth.php"><div class="center">Username<br><input size="20" type="text" name="name"></div> <div class="center">Password<br><input name="password" type="password" size="20"></div> <div class="center"><input type="submit" value="Log In" name="login"><input type="reset" value="Reset" name="reset"></div> <div class="center"><a href="">forgot password</a></div> </form> </div> <div id="maincontent"> <div id="main_left_container"> <div id="main_left_content"> left main content - left main content - left main content - left main content - left main content - left main content - left main content - left main content - </div> </div> <div id="main_right_container"> <div id="main_right_content"> right main content - right main content - right main content - right main content - right main content - right main content - right main content - right main content - right main content - right main content - right main content - right main content - right main content </div> </div> </div> <div class="clear"></div> <br><br> </div> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/196154-body-tag-not-using-css-width/#findComment-1030409 Share on other sites More sharing options...
simcoweb Posted March 24, 2010 Share Posted March 24, 2010 Create a wrapper div that will contain all your content and apply your width to that. It will center it which is the effect I believe you're looking for. #wrapper { width: 700px; margin: auto; padding: 0; } Quote Link to comment https://forums.phpfreaks.com/topic/196154-body-tag-not-using-css-width/#findComment-1031139 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.