BODY tag not using CSS width

jasonc · March 22, 2010

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<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>

</head>

<body>

</div>

<div><strong style="font-weight: normal; font-size: 2em; line-height: 1em;">Welcome</strong>

</div>

</div>

</div>

</div><div id="menubar">

<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"><a href="">forgot password</a></div>

</form>

</div><div id="maincontent">

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>

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>

</body>

</html>

aeroswat · 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

haku · March 23, 2010

It's generally considered polite to at least add a question to your post.

And please use code tags.

jasonc · 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>

simcoweb · 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;
}

Sign In

BODY tag not using CSS width

Recommended Posts

jasonc

Link to comment

Share on other sites

aeroswat

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

jasonc

Link to comment

Share on other sites

simcoweb

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information