CSS - Css 2 Column Problem

I would like a column to span the entire page vertically. When I browse my website on firefox, the page spans twice as long as the page. (www.skysupplyusa.com/a.php) Any advice?


Code:

#sidebar {
	float: left;
	background-color:#000;
	width: 20%;
	height: 100%;
}

#content{
	background-color:#FFF;
	width: 80%;
	min-height: 100%;
	height:auto;
	float: right;
	text-align:left;
}

/* Hack for IE */
* html #Content {
    height: 100%;
}
/* End IE Hack */

body {
	top:0;
	height: 100%;
	width: 100%;
	margin: 0;
	padding:0;
	text-align:left; 
	font-family: Arial, Helvetica, sans-serif;
	font-size:14px;
	line-height:1.5em;
	background-color: #DDD6CC;
}

Yep, there's another multiple column problem!

I'v created this website
to give an example of my problem.

As you can see, the #left and #content seem to ignore the border of the #navigator and slip right over it. This problem appears only in IE, in Mozilla there's no problem at all! What is happening?
Here's the CSS stylesheet I'm using:

body
{
text-align: center;
}

a
{
font-size:12px;
text-decoration:none;
font-weight:600;
font-family:verdana;
}

a:link {color:#FF0741;}
a:visited {color:BDD131;}
a:hover {color:white;}

#container
{
margin-left: auto;
margin-right: auto;
text-align: left;
width: 90%;
margin: 10px auto;
font-family:verdana;
font-size:12px;
background-color: #EEF3C9;
color: #FF0741;
line-height: 130%;
}

#Header
{
padding: 0;
background-color: #EEF3C9;
border-style:solid;
border-color:#BDD131;
border-width:1px 0px;
}

#navigation
{
border-style:solid;
border-color:#FFFFFF;
border-width:3px 0px;
text-align:right;
font-size:20px;
background-color:#BDD131;
margin:0;
padding:0;
}

#navigation li
{
display:inline;
padding:20px;
margin:0;
}

#navigation li a:hover
{
color:white;
}

#Left
{
float: left;
width: 200px;
height: 400px;
margin:0px;
background-color:#BDD131;
}

#Content
{
width: 550px;
background-color:#EEF3C9;
margin-left: 210px;
margin-top:10px;
padding: 40px 0px 0px 40px;
}

#End
{
clear: left;
margin: 0;
padding: .5em;
color: #FF0741;
border-style:solid;
border-color:#FFFFFF;
border-width:3px 0px;
background-color: #BDD131;
}

ok this is taking to long i go think of something else

I took the faux column idea, and from it created a left and right border image for my site. The following CSS from Dan Cederholm's faux column article on ALA is what I used, which is below..

Code:

/* image width is 760px, with one px on each end leaving 758px for the content area */

body {
background-image: url(images/bgborder.gif); 
background-repeat: repeat-y;
background-position: 50% 0;
text-align: center;
margin: 0 0;
padding: 0 0;
}

To test to make sure it worked well, I placed a content div on the site, which is centered and has a background color, to test to make sure the border image worked as it should. This is below...

Code:

#allcontent {
width: 758px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding: 0 0;
background-color: #ccc;
}

In FF this works great, but I found a bug in IE (as usual ) that I can't figure out. In IE 6.0, when the window is resized, the background from the content that should be inbetween the border image actually overlaps the image on the left hand side.

I can't think of anything that would trigger this, has anyone ever run into it? If not, does anyone have any idea why it happens?

-B

Hi, I have a 4 column layout, all the columns have percentage widths at the moment but I want the 3rd column to be fixed width. I can't seem to figure out how I can have columns 1,2 and 4 fluid and fit the page, whilst having column 3 fixed width.
Code:

 ________________________________________________
|    expand     | expand  |   fixed  |   expand  |
|               |         |   width  |           |
|               |         |          |           |
|               |         |          |           |
|               |         |          |           |
|               |         |          |           |

atm i've created this by just using position:absolute; and then a % width and % from left side. For example the 2nd column atm is width:20%; left:40%; (because 1st column is 40% width)

I'm sure you can help, thx! (if I didn't explain too well, ask all questions )

i want 2 columns side by side:css is as below. it seems the 2nd column is displayed below the first column.wat can be done to avoid this.
div#column1 {
margin-left: 150px;
width: 70px;
height: 500px;
background: #CCCCFF;
color: blue;}

div#column2 {
margin-left: 250px;
color: black;
background: blue;

}

I'm having problems with my CSS.

I have three columns.

1) Left for navigation
2) Middle for content
3) Right for sidebar

I am using this format for a template. The right sidebar column sometimes will be longer in height than the middle column depending on content of the page.

The Middle column has a 1px solid line on the left and right (using it as a visual divider). So I really want the Middle column to extend and follow the height of the Right sidebar. I can't add the border to the Right sidebar column because it has it's own border already.

What code should I use for the middle column?

I currently have this:

Code:

#middle {
       float: left;
       width: 375px;
       background: #fff;
       margin: 0 auto;
       padding-top: 0px;
       padding-left: 15px;
       padding-right: 15px;
       border-left: 1px solid #ccc;
       border-right: 1px solid #ccc;
       }

Thanks in advance.

I have a two column, three row layout for my website. I'm having
problems where my left column is longer than the middle "main" content,
and when that happends it overlaps my footer instead of pushing it
down.

Would someone mind looking at my html/css and tell me how I can fix
this issue?

Link: http://mividdesigns.com/csshelp.html

By the way, it works/looks fine in FF, but I have problems in IE.

Thank You!

I am working on a simple css design for my site. It has a header, footer, and I am trying to divide the content into two columns.

the attempt is he

http://www.jimpix.co.uk/rejig/008.htm

I have the two content columns defined as:

#leftcol {
width:70%;
float:left;
border:1px solid black;
}

#rightcol {
width:25%;
float:right;
border:1px solid black;
}

The above divs sit within a main 'content' div:

#content {
padding:10px;
border-top:2px solid #999999;
border-bottom:10px solid black;
}

But when I view the site in either IE6 or Firefox, the rightcol and leftcol divs do not sit within the content div, or at least, they don't appear to on the screen. Instead of the 'content' div expanding to contain the leftcol and rightcol divs, it just sits at the top, hence why there is a big black line at the top, instead of at the bottom, underneath the columns.

Can anyone see what I am doing wrong please?

Thanks

Jim

I'm working on site with some main containers and a 3-column content area inside the containers. The middle column on IE win is getting bumped down below the left column when it should be aligned to top. I'm kind of a novice so I have no idea what's going on. Can anybody help?

Here are my files:

http://www.artesiandesigngroup.com/westcoastpipe/grid.html
http://www.artesiandesigngroup.com/westcoastpipe/includes/main.css

Code:

body {
  font-family: Arial, Helvetica, sans-serif;
      background-color: #fff;
 text-align: center;
     margin: 0; padding: 0; }
/*** outside wrapper including fading background ***/
#container {
       position: relative;
     margin: auto;
   text-align: center;
     width: 840px;
   background: url(../images/layout/bg_page.gif) repeat-y center top; }

/*** actual container ***/
#pagesize {
       margin: auto;
   text-align: center;
     width: 800px;
   background-color: #9B9EA0;
      border: 1px solid #fff;
 border-bottom: none; }

/***  row 1 - top  ***/
#header {
  background-image: url(../images/layout/header.jpg);
     background-repeat: no-repeat;
   background-position: center top;
        margin: 0;
      padding: 0;
     width: 800px;
   height: 252px;
  border-bottom: 1px solid #fff; }
        
/***  Nav inside header  ***/
#topnav {
  position: relative;
     top: 150px;
     width: 800px;
   height: 102px;
  margin: 0;      padding: 0;
     background-color: #005195;
      color: #fff;
    font-size: .7em;
         }
#topnav ul {
  margin: 0; padding: 0; }
#topnav li {
    text-transform: uppercase;
      display: inline;
        list-style-type: none;
  margin: 0;      padding: 2px 4px;
       vertical-align: middle;
 border-right: 1px solid #fff; }

/***  row 2 - middle  ***/
#content {
     background: url(../images/layout/bg_content.gif) repeat-y center top;
   background:color: #fff;
 border: 1px solid #fff;
 border-bottom: none;
    margin: 30px 30px 0 30px;
       padding: 0;
     text-align: left; }

/***  column 1 - left  ***/
#sidebarphotos {
  float: left;
    margin: 0; padding: 0;
  width: 161px;
   font-size: .8em; }

/***  column 3 - right  ***/
#sidenav {
        margin: 0; padding: 0;
  float: right;
   width: 170px;
   background-color: #555;
 font-size: .8em;
        color: #ddd; }

/***  column 2 - center  ***/
#textarea {
  width: 395px;
   margin: 0; padding: 0;
  margin-right: 170px;
    margin-left: 169px;
     background-color: #fff;
 font-size: .9em;
        vertical-align: top; }

/***  header for textarea  ***/
#contentheader {
   margin: 0;
      padding: 4px 8px;
       vertical-align: middle;
 background: #dff url(../images/layout/bg_contentheader.jpg) repeat-y left top;
  font-size: 1em;
 font-style: normal;
     font-weight: normal;
    text-transform: uppercase;
      color: #005195;
 line-height: 1em;
       border-bottom: 1px solid #555;
}

/***  row 3 - bottom  ***/
#footer {
      width: 800px;
   margin: 0;
      padding: 2px 0;
 background-color: #005195;
      font-size: .6em;
        color: #fff;
    border-top: 1px solid #fff;
     border-bottom: none;
    letter-spacing: .1em;
}

Thanks in advance!

Ive tried to put stuff to the left of the news room in the blank spot and cannot seem to do so.. here is css:
Code:

#header {
	position: relative;
	margin: 0 auto;
	background: transparent url(img/bg/header-v2.gif) no-repeat bottom left;
	height: 235px;
	width: 760px;
	text-align: left;
	z-index: 10;
}
'#content {
	position: relative;
	background-color: #FFFFFF;
	height:inherit;
	width: 760px;
	margin: 0 auto 0 auto;
	text-align: left;
	border: 1px double rgb(72,183,239);
	overflow: hidden;
		font-size: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
#leftpanel{
position: inherit;
float: left;
background-color: #f5f5f5;
height: inherit;
width: 170px;
margin-left: 3px;
}
#leftpanel-head{
width: 158px;
height: 26px;
background-image: url(img/bg/leftpanel-head.png);
padding-left: 12px;
color: #FFFFFF;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding-top: 4px;
}
#content-right {
width: 585px;
height: inherit;
float: right;
}



#newsroom {
float: right;
width: 300px;
height: 30px;
margin-left: 2px;
}

#newsroom-header {
width: 300px;
height: inherit;
background-image:url(img/bg/video-player-head.png);
color: #FFFFFF;
font-weight: bold;
padding-left: 3px;
padding-top: 4px;
}

#welcome{
float: left;
height: 27px;
width: 279px;
color: #FFFFFF;
font-weight: bold;
padding-left: 3px;
padding-top: 4px;
}

#welcome-text {
float: left;
height: 27px;
width: 279px;
color: #FFFFFF;
font-weight: bold;
padding-left: 3px;
padding-top: 4px;
}

#primary-nav {
	position: absolute;
	background: transparent url(img/bg/primary-nav-v2.gif) no-repeat;
	list-style: none;
	width: 760px;
	height: 26px;
	top: 203px;
	left: 1px;
	z-index: 10;
	padding-left: 5px;
}

#primary-nav li {
	float: left;
	background-position: 0 -26px; 
}

#primary-nav li ul {
	position: absolute;
	background: transparent url(img/primary-nav-top.png) no-repeat;
	list-style: none;
	width: 159px;
	left: -9999px;
	margin-left: -9px;
	padding-top: 5px;
}

#primary-nav a {
	display: block;
	height: 0px !important;
	text-decoration: none;
	overflow: hidden;
}

#primary-nav li a {
	background-position: 0 0; 
}

#primary-nav li#nav-1 {
	background: transparent url(img/bg/nav-1.png) no-repeat;
	margin-right: 1px;
}

#primary-nav li#nav-2 {
	background: transparent url(img/bg/nav-2-shopping.png) no-repeat;
	margin-right: 1px;
}
#primary-nav li#nav-3 {
	background: transparent url(img/bg/nav-3-restaurants.png) no-repeat;
	margin-right: 1px;
}

#primary-nav li#nav-4 {
	background: transparent url(img/bg/nav-4-hotels.png) no-repeat;
}

#primary-nav li#nav-5 {
	background: transparent url(img/bg/nav-5-history.png) no-repeat;
}
#primary-nav li#nav-6 {
	background: transparent url(img/bg/nav-6-links.png) no-repeat;
}
#primary-nav li#nav-7 {
	background: transparent url(img/bg/nav-7-about.png) no-repeat;
}


#primary-nav li#nav-1:hover, 
#primary-nav li#nav-1.sfhover,
#primary-nav li#nav-2:hover, 
#primary-nav li#nav-2.sfhover,
#primary-nav li#nav-3.hover,
#primary-nav li#nav-3.sfhover,
#primary-nav li#nav-4:hover, 
#primary-nav li#nav-4.sfhover,
#primary-nav li#nav-5:hover, 
#primary-nav li#nav-5.sfhover,
#primary-nav li#nav-6:hover, 
#primary-nav li#nav-6.sfhover,
#primary-nav li#nav-7:hover, 
#primary-nav li#nav-7.sfhover{
	background-position: 0 -26px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}

#primary-nav li#nav-1 a, 
#primary-nav li#nav-2 a,
#primary-nav li#nav-3 a,
#primary-nav li#nav-4 a,
#primary-nav li#nav-5 a,
#primary-nav li#nav-6 a,
#primary-nav li#nav-7 a  {
	width: 107px;
	height /**/: 26px;
	padding: 26px 0 0 0;
}

#primary-nav li#nav-1 ul li,
#primary-nav li#nav-2 ul li,
#primary-nav li#nav-3 ul li,
#primary-nav li#nav-4 ul li,
#primary-nav li#nav-5 ul li,
#primary-nav li#nav-6 ul li,
#primary-nav li#nav-7 ul li{
	background: transparent url(img/bg/primary-nav-link-up.png) no-repeat;
	height: 21px;
}

#primary-nav li#nav-1 ul li.bottom,
#primary-nav li#nav-2 ul li.bottom,
#primary-nav li#nav-3 ul li.bottom,
#primary-nav li#nav-4 ul li.bottom,
#primary-nav li#nav-5 ul li.bottom,
#primary-nav li#nav-6 ul li.bottom,
#primary-nav li#nav-7 ul li.bottom{
	background: transparent url(img/bg/primary-nav-bottom.png) no-repeat;
	height: 14px;
	width: 159px;
}

#primary-nav li#nav-1 ul li a,
#primary-nav li#nav-2 ul li a,
#primary-nav li#nav-3 ul li a,
#primary-nav li#nav-4 ul li a,
#primary-nav li#nav-5 ul li a,
#primary-nav li#nav-6 ul li a,
#primary-nav li#nav-7 ul li a {
	overflow: hidden !important;
	overflow: visible;
	font-size: 10px;
	color: #FFF;
	height: 19px !important;
	height: 19px;
	width: 107px;
	padding: 1px 3px 2px 19px;
}

#primary-nav li#nav-1 ul li a:hover,
#primary-nav li#nav-2 ul li a:hover,
#primary-nav li#nav-3 ul li a:hover,
#primary-nav li#nav-4 ul li a:hover,
#primary-nav li#nav-5 ul li a:hover,
#primary-nav li#nav-6 ul li a:hover,
#primary-nav li#nav-7 ul li a:hover {
	background: transparent url(img/bg/primary-nav-link-over.png) no-repeat 0 0;
}

#primary-nav li:hover ul, 
#primary-nav li.sfhover ul {
	left: auto;
}

html:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html class="sIFR-active" id="home" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head style="background-color: rgb(255, 0, 0);">
	<title>TysonsCorner.com&trade;</title>
	<link rel="shortcut icon" href="#">
	<link href="home.css" rel="stylesheet" type="text/css">
	<link href="global.css" rel="stylesheet" type="text/css">
    <link href="nav1.css" rel="stylesheet" type="text/css">

</head><body>
<div id="container">
	<!-- HEADER AREA STARTS HERE -->
        <div id="content">
<div id="header">
	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="760" height="200" id="Banner(FLASH) - Beta" align="middle">
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="allowFullScreen" value="false" />
	<param name="movie" value="Banner(FLASH) - Beta.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />	<embed src="Banner(FLASH) - Beta.swf" quality="high" bgcolor="#ffffff" width="760" height="200" name="Banner(FLASH) - Beta" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
	</object>
		<ul id="primary-nav">
			<!-- PRIMARY NAVIGATION (CATEGORIES) STARTS HERE -->
			<li id="nav-1"><a href="#" title="Tysons Corner Homepage">Tysons Homepage</a>
				<ul>
					<li><a href="#" title="Tysons 1 Stores">News</a></li>
					<li><a href="#" title="Tysons 2 Stores">Events</a></li>
                    <li><a href="#" title="More Tysons Shopping">Contact Us</a></li>
					<li class="bottom"></li>
				</ul>
			</li>
			<!-- PRIMARY NAVIGATION (BRANDS) STARTS HERE -->
			<li id="nav-2"><a href="#" title="Tysons Corner Shopping">Tysons Shopping</a>
				<ul>
					<li><a href="#" title="Tysons 1 Stores">Tysons I</a></li>
					<li><a href="#" title="Tysons 2 Stores">Tysons II</a></li>
                    <li><a href="#" title="More Tysons Shopping">More Shopping</a></li>
					<li class="bottom"></li>
				</ul>
			</li>
			<!-- PRIMARY NAVIGATION (PRODUCTS) STARTS HERE -->
			<li id="nav-3"><a href="#" title="Tysons Corner Restaurants">Tysons Restaurants</a>
				<ul>
					<li><a href="#" title="Cajun Food">Cajun</a></li>
					<li><a href="#" title="Grilled Food">Grilled</a></li>
					<li><a href="#" title="Foreign Food">Foreign</a></li>
					<li><a href="#" title=" Full List Restaurants">Complete List</a></li>

					<li class="bottom"></li>
				</ul>
                <li id="nav-4"><a href="#" title="Tysons Corner Restaurants">Tysons Restaurants</a>
                <li id="nav-5"><a href="#" title="Tysons Corner Restaurants">Tysons Restaurants</a>
                <li id="nav-6"><a href="#" title="Tysons Corner Restaurants">Tysons Restaurants</a>
                <li id="nav-7"><a href="#" title="Tysons Corner Restaurants">Tysons Restaurants</a>
		</li>
    </ul>

</div>

<div id="leftpanel">
<div id="leftpanel-head">
Search
</div>

<form id="form1" method="post" action="">
  <p>
    <label>
      <input type="text" name="IDsearch" id="IDsearch" width="150"/>
      </label>
  </p>
</form>

<div id="leftpanel-head">
Events Calendar
</div>


<div id="leftpanel-head">
Sponsored Ads
</div>
<script type="text/javascript"><!--
google_ad_client = "pub-8246327012745782";
/* 120x600, created 10/23/08 */
google_ad_slot = "1782998545";
google_ad_width = 120;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>  


<div id="newsroom">
<div id="newsroom-header">News Room</div>
</div>    

<div id="welcome">Test</div>

<div id="newsroom">
<script language="javascript" src="http://www.thenewsroom.com//mash/swf/voxant_player.js?a=V3126802&m=669243&w=300&h=290&v=2"></script>
</div> 
</div>  


</body></html>

Demo: http://www.reston.com/Tysons Corner COM

I have this problem on 2 sites I'm working on. I can't seem to nest 2 divs in a content div to create a 2 column layout. In FF it seems to work fine but IE is pushing the left column content down below the right column content. I've tried many things and I'm stuck.

Am I going about the whole concept the wrong way or is there some small hack I'm missing somewhere? Any help would be great.

link

Thanks,

Brad

Hello

I would be really grateful if anyone can help me - I'm struggling with a 3 column layout using css.

It seems to work well in all except IE6 (I'm looking at it on a Mac using Safari and Firefox, I've got different browser screen shots from a website and all seem OK except IE6, which puts the center column under the other two, instead of at the same height.

If anyone has any ideas, they'd be much appreciated - I don't really know what I'm doing with css, and I have tried several different 3 col layouts that I've found on the web: this is the only one that has worked in almost all browsers for me.

This is the style sheet:

body {background: #003366; }
a { font-family: Verdana, Arial, sans-serif; text-decoration:none; font-size: medium; color: #de8600;}
h1 { font-family: Verdana, Arial, sans-serif; font-size: x-large; font-weight: bold; background: #FFFFFF; color: #DE8600}
h2 { font-family: Verdana, Arial, sans-serif; font-size: large; font-weight: bold; color: #003366}
h3 { font-family: Verdana, Arial, sans-serif; font-size: medium; font-weight: bold; color: #003366}
h4 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: medium; font-weight: bold; background: #003366; color: #DE8600}
h5 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: medium; font-weight: normal; background: #FFFFCC; color: #000033}
p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: medium; color: #003366;}
a:visited {font-family: Verdana, Arial, sans-serif; font-size: medium; color: #de8600;}
a:hover { font-family: Verdana, Arial, sans-serif; text-decoration:underline; font-size: medium; color: #DE8600;}

body {
padding: 0px;
border:0;
background: #003366;

}

div#wrapper {
width: 780px;
margin: 0 auto;

}

div#header {
background-image: url("header.jpg");
background-repeat: no-repeat;
color: #FFFFFF;
margin-left:auto;
margin-right:auto;
margin-top: 0;
width:780px;
height: 200px

}

#header .slogan {
text-align: left;
padding-left: 20px;
padding-right: 20px;
color: #003366;
font-size: 0.8em;
}

p.slogan {
text-align: left;
padding-left: 20px;
padding-right: 20px;
color: #003366;
}

div#navcontainer
{
background: #003366;
margin: 0px 0px 0px 0px;
padding: 1em 0 0 0;
font-size: 0.8em;
text-align: center
text-transform: lowercase;
border-top: 2px solid #de8600;
}

/* to stretch the container div to contain floated list */
#navcontainer:after
{
content: ".";
display: block;
line-height: 1px;
font-size: 1px;
clear: both;
}

ul#navlist
{
list-style: none;
padding: 0;
margin: 0 auto;
display: inline;
width: 100%;
font-size: 0.8em;
}

ul#navlist li
{
display: block;
float: left;
width: 20%;
text-align: center
margin: 0;
padding: 0;
}

ul#navlist li a
{
display: block;
width: 100%;
padding: 0.5em;
border-width: 1px;
border-color: #ffe #aaab9c #ccc #fff;
border-style: solid;
color: #666666;
text-decoration: none;
background: #cccccc url(nav.gif);
}

#navcontainer>ul#navlist li a { width: auto; }

ul#navlist li#active a
{
background: #cccccc url(nav.gif);
color: #996600;
}

ul#navlist li a:hover, ul#navlist li#active a:hover
{
color: #996600;
background: transparent;
border-color: #aaab9c #fff #fff #ccc;
}

#container
{
position: relative;
display:block;
background:#0ac;
border-left:200px solid #003366;
border-right:200px solid #003366;
}

#inner
{
display:block;
margin-left:-200px;
margin-right:-200px;
padding:5px;

}

#left
{
float:left;
position: relative;
width:200px;
left:0px;
}

#right
{
float:right;
position: relative;
width:200px;
right:0px;
}

#center
{
margin-left:200px; margin-right:200px; position:relative; display:block; height:1%;}
.clear {clear:both;}

/* Just to extend each column */
#inner a:visited, a {text-decoration:none; cursor:default;}
#inner a span {display:none;}
#inner a:active, #inner a:focus {color:#fff; text-decoration:none; background:transparent; cursor:default;}
#inner a:active span, #inner a:focus span {display:block;}

.menu {
width:150px;
height:150px;
position:relative;
margin:0;
font-size:11px;
margin:0px 0;
z-index:100;

}

.menu ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
color:#003366; width:150px;
height:25px;
text-align:center;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#003366 url(nav.gif);
line-height:19px;
font-size:11px;
}

.menu ul {
padding:0;
margin:0;
list-style-type: none;
}

.menu ul li {
float:left;
margin-right:1px;
position:relative;
}

.menu ul li ul {
display:none;
}

/* specific to non IE browsers */
.menu ul li:hover a {
color:#996600;
background:#cccccc;
}

.menu ul li:hover ul {
display:block;
position:absolute;
top:0;
left:150px;
width:150px;
}

.menu ul li:hover ul li a.hide {
background:#ffffff;
color:#003366;
}

.menu ul li:hover ul li:hover a.hide {
width:150px;
}

.menu ul li:hover ul li ul {
display: none;
}

.menu ul li:hover ul li a {
display:block;
background:#cccccc;
color:#996600;
width:200px;
}

.menu ul li:hover ul li a:hover {
background:#dfc184;
color:#666666;
}

.menu ul li:hover ul li:hover ul {
display:block;
position:absolute;
left:151px;
top:0;
color:#003366;
}

.menu ul li:hover ul li:hover ul li a {
display:block;
width:200px;
background:#dfc184;
color:#003366;
}

.menu ul li:hover ul li:hover ul li a:hover {
background:#bd8d5e;
color:#fff;
}

div#fla {
position:relative;
text-align: center;
font-size: 10px;
margin: 20px 0 20px 0;
}

p.fla {
text-align: center;
font-size: 10px;
color: #ffffff;
margin: 0;
}

p.date {
text-align: right;
font-size: 0.8em;
color: #ffffff;
margin: 0;
}

div#guardian {
height:60px;
margin: 10px 0 10px 0;
align: right;
}

div#banner {
width:200px;
margin:20px 0 20px 0;
background:#ffffff;
padding:10;
color:#003366;
font-size:10px;
text-align: center;
border:1px solid #de8600;
}

#banner a:hover {
color:#996600;
font-size:10px;
text-align: center;
background:#cccccc;

}

p.banner {
color:#003366;
font-size:10px;
text-align: center;

}

div#google {
width:180px;
height:120px;
margin:10px 0 0 0;
background:#003366;
padding:5px;
color:#ffffff;
}

div#search {
width:180px;
margin:20px 0 20px 0;
background:#ffffff url("search.gif");
background-repeat: no-repeat;
padding:10px;
color:#003366;
border:1px solid #de8600;
}

p.search {
color:#003366;
font-size:11px;
text-align: center;

}

a.search {
color:#003366;
font-size:11px;
text-align: center;

}

#search a:hover {
color:#996600;
font-size:11px;
text-align: center;

}

div#edit {
width:250px;
margin:20px 0 0 0;
background:#ffffff url("edit-box.jpg");
background-repeat: no-repeat;
padding:20px;
color:#003366;
border:1px solid #de8600;
}

p.edit {
color:#003366;
font-size:11px;
text-align: center;

}

a.edit {
color:#003366;
font-size:11px;
text-align: left;

}

#edit a:hover {
color:#996600;
font-size:11px;
text-align: left;

}

.gallerycontent{
width: 250px;
border: 1px solid #de8600
background-color: #fffFFF;
text-align: center;
display: block;
}


div#footer {
clear:both;
position:relative;
align:center;
color: #FFFFFF;
margin-left:auto;
margin-right:auto;
margin-top: 20px;
width:780px;
height: 160px

}

p.footer {
color:#ffffff;
font-size:10px;
text-align: left;

}

I am apparently not allowed to post the URL of the page, but I hope that someone may be able to make some suggestions anyway.

Thanks for your time!

Frances

Okay, I have a page on which I want a banner div with a links div underneath it, a left menu bar div, and a content div. I've put them all in a container div. However, on some pages the menu bar is longer than the content and on others the content is longer than the menu bar. I want the menu bar and the content bar to always be equal heights but adjust to the length of content. Here's the gist of the code:
Code:

 #container {
		text-align: left;
		background:#000064;
		margin-left: auto;
		margin-right: auto;
		width: 650;
		height:100%;
		border: 1px solid #e0e0e0;		
		}
	
#banner {
	background: #fff;
	width: 650;
		}

#piclinks  {
	background: rgb(00,00,64);
	padding-top: 10px;
	padding-bottom: 5px;
	width: 650;
		}
#links {
	position: absolute;
	padding-left: 5px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-right: 1px dotted #fff;
	width: 140px;
	font-family: verdana, arial, georgia, sans-serif;
	color: #fff;
	font-size: 8pt;
	background: rgb(00,00,64);
	
	}
	
#content {
		position: relative;
		float: right;
		width: 500;
		font-family: verdana, arial, georgia, sans-serif;
		font-size: 8pt;
		color: #fff;
		padding: 5px;
		}

I've looked at a few resources, including the 'PIE' site, but haven't been able to quite figure it out.
Thanks

www.asticafe.com

Can anyone tell me why the right column is clearing the left images? It only happens in IE, not modern browsers like Firefox or Safari. What's causing it and how can I fix it? I've tried playing around with "clear:none" and "float:right" properties for the right column, but it just makes the problem worse.