Jump to content


Auto Expanding Layout Question

Started by signature16, Sep 21 2006 12:56 AM

  • This topic is locked This topic is locked
No replies to this topic

#1 signature16

    Young Padawan

  • Members
  • Pip
  • 180 posts
  • Gender:Male
  • Location:San Diego

Posted 21 September 2006 - 12:56 AM

I am trying to make my layout expand according to the users screensize. On the left hand side of my screen I have a vertically repeating image around 50px wide and i have a sidebar around 100px wide. How can i mae the rest of the screen for content? The picture below is a quick sketch of kinda what it looks like.

I want to make the content area take up 100% of the screen minus the 200 pixels used on the left side for the navigation and tiled grunge.

here is my code so far:

CSS:
body,html	{font-family:Geneva, Arial, Helvetica, sans-serif; font-size:10pt; text-align:center; margin:0; background-color:#ffffff;
				background-image:url(../images/side.gif); background-position:left; background-repeat:repeat-y;}

#topbar	{background-color:#333333; width:100%; height:100px; background-image:url(../images/pacificx.gif); background-position:center; background-repeat:no-repeat; margin-bottom:20px; border-bottom:#999999 5px solid;}


#container	{width:100%; text-align:left; margin:auto; padding-left:100px; background-color:#FFFFFF; overflow:none;}
#sidebar	{width:100px; border-right:1px dashed #999999; display:block; float:left;}
#content	{ width:100%; float:right;}
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<meta name="robots" content="all" />

	<link rel="stylesheet" type="text/css" href="css/global.css">	
</head>

<body>
<div id="topbar"></div>
<div id="container">
<div id="sidebar">
<p>adsf</p>
<p>asdf</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>sadf</p>
<p>sadf</p>
<p>adsf</p>
<p>&nbsp;</p>
</div>
<div id="content">
  <p>asdf</p>
  <p>asdfdsaf</p>
  <p>sad</p>
  <p>&nbsp;</p>
  <p>asfd</p>
  <p>dsa</p>
  <p>f</p>
  <p>asf</p>
  <p>ads</p>
  <p>fsa</p>
  <p>f</p>
  <p>dsaf</p>
  <p>sad</p>
  <p>f</p>
  <p>sadf</p>
  <p>sad</p>
  <p>f</p>
  <p>&nbsp;</p>
  
</div>



</div>
</body>
</html>

Attached Files


Edited by signature16, 21 September 2006 - 12:59 AM.

Back to Programming and General Web Design · Next Unread Topic →


1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users

  1. Pixel2Life Forum
  2. → Help Section
  3. → Programming and General Web Design