Autoexpanding CSS Cols to fit screen

Posted on 2008-11-17
Medium Priority
Last Modified: 2012-08-13
Back in the day it was easy to create a layout with tables that autostretched depending upon screen size.  WIth CSS it seems a bit more tricky.

I have attached a HTML file with CSS as an example of what I am trying to do.  I need the file to stretch out the 3 divs 100% of user screen size.  However, the header and right col hav specified px values that have to stay.  I also do not want scroll bars to appear on the page like you used to be able to do with Tables.

How do I autostretch the left nav link layer to 100% of the remaining page height?  How do I stretch the content layer to 100% of remainign page hieght and width?  Will this code work in all standard CSS supporting browsers and screen sizes?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
html {
	height: 100%;
	margin: 0px;
	padding: 0px;
body {
	height: 100%;
	margin: 0px;
	padding: 0px;
#Header {
	width: 100%;
	height: 100px;
	background-color: #006633;
	color: #FFFFFF;
#SideLinks {
	width: 150px;
	height: 400px;
	color: #FFFFFF;
	float: left;
#Content {
	width: 400px;
	height: 400px;
	margin: 10px;
	padding: 2px;
	border: solid 2px #333333;
	float: right;
<div id="Header">Header Height: 100px Width: 100% </div>
<div id="SideLinks">
  <p>Width: 150px</p>
  <p>Height: ?? How do I set the height so it automatically fills 90% or 100% or whatever the rest of the height is to touch the bottom of the screen without scrolling??? </p>
<div id="Content">
  <p>Width: ??? How do I set the width so that this box stretches accross what is left of the screen? It has margins and borders.</p>
  <p>Height: ??? Same question. Want it to fill the space that is remaining hith.  </p>

Open in new window

Question by:hoyaabanks
1 Comment
LVL 43

Accepted Solution

David S. earned 2000 total points
ID: 22980287

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question