Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

screen width problem

Status
Not open for further replies.
jimmyshoes

jimmyshoes

Programmer
Jun 1, 2008
132
GB
I am trying to emulate the 960px screen width as exemplified at My code however does not render at the same 960 px size. The horizontal srollbars of both pages do not match
Code: 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<div style="margin-left:auto;margin-right:auto;width:960px;">
<div style="width:940px;border:1px solid #000"></div>
</div>
</body>
</html>

Can anyone tell me what I am doing wrong?
 
Sort by date Sort by votes
I am not sure what you're expecting. Based on the code you gave us, I would expect an element in the middle of the viewport that is 960px wide. Inside this element will be another, 942px (1px black border on each side), which will be left aligned. Are you not seeing this?

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
I don't think I am seeing this ( using Firefox ) When I view the rendering of this code and the rendering at the viewport sizes are definitly different ( I can tell becasue the horizontal scrollbar is differently scaled for each page)
 
Upvote 0 Downvote
Few things to note.

1. Please use a complete and valid doctype if you expect your code to work correctly.
2. By default, body element in HTML has some padding on margin applied to it. The grid page resets that to 0, while your code doesn't. This can cause the gap you're seeing, depending on the browser.
3. Please note that your page would be very short and would not need the vertical scrollbar, which takes some space. The other page surely has the scrollbar. This can cause the difference in the proportions of the horizontal scrollbar.

Other than these three things, I have checked your code (with a complete doctype) and after zeroing the margins and paddings and making sure both pages had the vertical scrollbar, their widths were exactly the same.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
Well this is strange. It appears that in Firefox, these 2 code snippets are rendered with a different viewport size

Code: 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<div style="margin-left:auto;margin-right:auto;width:960px;">
<div style="width:940px;border:1px solid #000"></div>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>

Code: 
<!DOCTYPE HTML>
<html lang="en"><head>


<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>960 Grid System — Demo</title>


<style>
.container_12{margin-left:auto;margin-right:auto;width:960px}

.container_12 .grid_12{width:940px}

p {
	border: 1px solid #666;
}



</style>
</head><body>

<div class="container_12">
	<div class="grid_12">
		<p>
		123
		</p>
	</div>
</div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</body></html>
 
Upvote 0 Downvote
The two examples you gave will be different.

First has a div that has 940px of inner space and 1px border added on each side, that is 942px altogether. The usable space inside the div is 940px and div appears to be 942px wide.

Second has a div with a working space of 940px and inside that a paragraph that stretches the entire size, except for the 1px on each side that is taken by the border. The second border will be 940px and working space will be 938px.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
358
PeDa
PeDa
kurio71
  • Locked
  • Question
Centre a DIV Regardless of Screen Size 2
Replies
7
Views
139
ChrisHirst
ChrisHirst
lupidol
  • Locked
  • Question
Elements not populate the entire screen 1
Replies
1
Views
59
ChrisHirst
ChrisHirst
audiopro
  • Locked
  • Question
HTML Bookmark on touch screen 2
Replies
8
Views
102
Olaf Doschke
Olaf Doschke
audiopro
  • Locked
  • Question
Reliable screen size detection 3
Replies
13
Views
543
vacunita
vacunita

Part and Inventory Search

Sponsor

Back
Top