Having issues with heights

I have a website I am working on. I have run into this problem before and got creative, but I figured there has to be a better way.

Problem: I have two DIV's inside a DIV named "maincontent" I need to float one of the inner DIV's left, and the other to the right to create a content area and sidebar. However, when I float both the "maincontent" DIV collapses. I had to set a height, but I don't want to have to set a height as the content grows and shrinks. How do I get the "maincontent" DIV to grow with the content inside it?

-------------------------------------------------------

help with div heights !

I've tried the clear: both; method for the footer of my page but it still won't expand to fit this div with the image gallery.

It's a very simple website, I just don't know what I'm doing.

http://www.polyform-design.com/stationary.html

HTML:

<body class="main">
 
<div id="container">
 
  <div id="home">
  <a href="http://www.polyform-design.com/index.html" target="_self"><img src="http://www.polyform-design.com/images/header.jpg" width="900" height="230" border="0" /></a>
  </div>
 
  <div id="content">
    <div id="images">
    <ul id="gallery">

100% height in MULTIPLE divs

I usually have my structure laid out something like this:

<div id="all">
  <div id="page">
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
  </div>
</div>

Where the body will hold a background pattern, "all" will hold a dropshadow for the page going up and down, and "page" may often have a repeating-y background as well.

I have tried variations on using the css height/min-height properties:

html, body {
    height:100%;
    ...
}
#all {
    height:100%; 
    min-height:100%; 
}
#page {
    height:100%; 

How can I get these two DIVs to be the same height and stay the same as content fills in them?

I have a question and I am sure my code is a mess because I am new to CSS but so far I have only noticed a problem in Safari for windows which I will work all that out at the end but I am confused about my main content area and the side bar on the right. I want them to always be the same height no matter what. Most likely the content/news section will dominate the length of the page. So the sidebar should just show white space and continue down next to the news articles. RIght now it's not doing that, I tried height auto and 100% and they did not work.

Simple DIV layout question

Hello good people,

I've pasted HTML code below (CSS included in ). The problem is, that I can not make #left and #right to be set to the same height as the #center div. Please help. Smile

Thanks in advance.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<META content="text/html; charset=windows-1257" http-equiv="Content-Type">
<TITLE>
</TITLE>
 
<STYLE type="text/css">
#container {
width: 750px;
margin: 0px auto 0px auto;
}
 
#header {
background:#CCCCCC;
padding:10px;

Syndicate content