Autoexpanding CSS Cols to fit screen

Posted on 2008-11-17
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" "">

<html xmlns="">


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

    Accepted Solution


    Featured Post

    Enabling OSINT in Activity Based Intelligence

    Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

    Join & Write a Comment

    Suggested Solutions

    This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
    Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
    In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
    In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

    728 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

    Need Help in Real-Time?

    Connect with top rated Experts

    23 Experts available now in Live!

    Get 1:1 Help Now