Need help getting Div content to adjust to screen resolution

Page 1 of 1

1 Replies - 581 Views - Last Post: 22 June 2012 - 03:46 AM

#1 gemoney  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 112
  • Joined: 30-October 09

Need help getting Div content to adjust to screen resolution

Posted 22 June 2012 - 03:42 AM

I have tried px, em, percentage, but none have work in getting the <div id="content"> width to adjust with screen resolution. I need a resolution to this resolution problem. lol Thanks
CSS code:
* {
	margin: 0;
	padding: 0;
}

a {
	color: blue; /*#8f5038*/
	text-decoration: underline;
}

a:hover {
	color:#6CA6CD;
	text-decoration: none;
}

a:visited {
	color:#474747;; 
	text-decoration: none; 
	
}

body {
	font-size: 10.5pt;
	line-height: 1.75em;
	font-family: Arial, sans-serif;
	background: #e1e4e5 url('img/bg.png');
	color: #383939;
	
}

br.clear {
	clear: both;
}


h2,h3,h4 {
	margin-bottom: 1em;
	font-family: "PT Sans Narrow", sans-serif;
	font-weight: normal;
	color: #000;
}

h2 {
	font-size: 1.8em;
}

h3 {
	font-size: 1.4em;
	line-height: 50px;
}

img.left {
	float: left;
	margin: 8px 20px 20px 0;
}

img.top {
	margin: 8px 0 20px 0;
}


.imageList {
	list-style: none;
}

.imageList li {
	clear: both;
}

#bg {
	background: url('img/highlight.png') top left repeat-x;
}


#map_canvas {
	position: relative;
    width:100%; 
    height:500px;
 	margin: 0px 0 24px 0; 	
}


#content {
	position: relative;	
	width: 59%;/* Changes left width 662*/
	height: 516px;
	margin: 0px 28px 0 234px;
	padding: 20px 20px 20px 20px;
	background: #ffffff;
	border-bottom: solid 1px #c0c0c0;
	border-right: solid 1px #444444;
	
}


#footer {
	position: relative;
	padding: 28px;
	margin: 0 0 28px 0; /* change 0px to move margin down1124*/
	width: 96%;
	height: 80px;
	background: #636363;
	color: #d3d3d3;
	border-bottom: solid 1px #444444;
	text-shadow: 0 1px 0 #404040;
	text-align: center;
}


#footerContent {
	width: 812px;
	float: left;
}


#header {
	position: relative;
	padding: 28px;
	height: 70px;
	width: 96%;
	/*background: #ffffff;*/
	background: #636363;
	color: #474747;
	border-bottom: solid 1px #444444;
	text-shadow: 0 1px 0 #404040;
}

#logo {
	text-align: center;
	position: relative;
	margin: -14px auto;
	height: 98px;
	line-height: 98px;
}

#logo a {
	text-decoration: none;
	color: #000;
	text-shadow: 0px 3px 0px #ffffff;
}

#logo h1 {
	font-size: 3.25em;
	font-family: Lobster, cursive;
}

#main {
	position: relative;
	padding: 0px;
	margin: 0;
	width: 100%px;/*Changes left width*/ /*1180*/	
	align: center;
	color: #474747;
}

#main strong {
	color: #242424;
}

#outer {
	position: relative;
	width: 98%; /*1180*/
	padding-top: 10px;
	/*padding-left:10px;*/
	margin: 0 10px 0 10px;
	border-color:white; 
	border-style:solid 2px #c0c0c0;
}


#sidebar1 {
	width: 160px;
	height: 500px;
	float: left;
	padding: 28px;
	background: #ffffff;
	color: #474747;
	border-bottom: solid 1px #c0c0c0;
	text-align: center;
}



#sidebar2 {
	width: 160px;
	height: 500px;
	float: right;
	padding: 28px 28px 28px 28px;
	background: #ffffff;
	color: #474747;
	border-bottom: solid 1px #c0c0c0;
	text-align: center;
	
}


And HTML code:
<body onload="initialize()">
	<div id="bg">
		<div id="outer">			
			<div id="header">
				<div id="logo">
					<h3></h3>
					<h3></h3>
				</div>
			</div>
			<div id="main">					
				<div id="sidebar1">
					
				</div>					
				<div id="sidebar2">
					 <div id="side_bar"></div>
				</div>
				//I need help with this id="content"					
				<div id="content">
					<div id="map_canvas"></div>				
				</div>					
				<br class="clear" />
				<div id="footer">
					<div id="footerContent">								
						
					</div>
					<br class="clear" />
				</div>
			</div> 		
		</div>
	</div>
</body>
</html>


Is This A Good Question/Topic? 0
  • +

Replies To: Need help getting Div content to adjust to screen resolution

#2 mccabec123  Icon User is offline

  • D.I.C Head

Reputation: 18
  • View blog
  • Posts: 217
  • Joined: 03-March 11

Re: Need help getting Div content to adjust to screen resolution

Posted 22 June 2012 - 03:46 AM

If you use a percentage the width will adjust to a percentage of any screen size, therefore it should be the correct size on every screen. The only problem you may encounter is that on larger screens the width will be a lot larger than you may have anticipated and some elements of the site may not look correct.

Also, why are you using 'position: relative;' when you aren't adjusting the left, right, top or bottom properties?

This post has been edited by mccabec123: 22 June 2012 - 03:49 AM

Was This Post Helpful? 0
  • +
  • -
Page 1 of 1