CSS - Ie Css Problem. Sidebar Getting Pushed To Bottom...

The site is question is: http:// w ww.stolen-bikes.org/index4.php


The CSS is: http:// w ww.stolen-bikes.org/css/non_ie.css

Basically I want the sidebar (blue div), to line up on the side as it is but up flush against the top as you would expect a floated content area with a floated sidebar next to it. If I take out the #sidebar in the css it DOES align right up at the top as I want it to. The minute you as a float:left or width or anything it jumps down to the end of the #masthead div and beginning of the #content div. Im pretty sure I have everything lined up correctly I just cant figure out why this is doing that! Please help!

I tried a bunch of stuff to fix this. I only removed the sidebar from the pages, not the blog.

This is how the footer is SUPPOSED to look: http://www.regionalcreations.com/fotografix/?page_id=4

This is how it looks on the pages:
http://www.regionalcreations.com/fotografix/

For some reason the footer is up inside the body. Help?

All I did was comment out the sidebar like this:
Code:

<!--
</div class="art-sidebar1">
<?php include (TEMPLATEPATH . '/sidebar1.php'); ?>
</div>
-->

And copy the css for the width and change the name and values:
Code:

.page-contentLayout .page-content
{
	position: relative;
	margin: 0;
	padding: 0;
	border: 0;
	float: left;
	overflow: hidden;
	width: 876px;
}
.page-contentLayout .page-content-wide
{
	position: relative;
	margin: 0;
	padding: 0;
	border: 0;
	float: left;
	overflow: hidden;
	width: 875px;
}

Hi.

Simple issue really. I have an image 14px x 8 px. The box created for the image is correct, but the image is being forced off its image space because there is a gap on the left side of the image (3px).

I cannot find any mention of this space in the stylesheet.

Here is a link to my page:
http://www.zombiemod.com/rm/nina2/main.php?g2_itemId=14

Here are the two images in question:
http://www.zombiemod.com/rm/nina2/themes/ajaxian/images/controls-left.png
http://www.zombiemod.com/rm/nina2/themes/ajaxian/images/controls-right.png

In summary, the entire image isnt being display properly, it is being padded one side and cropped the other side.

Here is my HTML:
Code:

<div id="content">
  <div id="main-image-container"  {if $theme.imageCount == 0}style="display:none"{/if}>
    {if $theme.imageCount > 0}
      <div id="slideshow-controls">
        <ul id="control-buttons">
    <li><button id="controls-left">
      <img src="{g->theme url="images/controls-left.png"}" alt="{g->text text="Left"}" />
      </button></li>
    <li><button id="controls-play">
      <img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Play"}" />
      </button></li>
    <li><button id="controls-right">
      <img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Right"}" />
      </button></li>
        </ul>
      </div>

Here is my CSS:

Code:

#slideshow-controlsx {
    position: relative;
    height: 14px;
    margin: 0px 0 -58px;
    overflow: hidden;
    z-index: 100;
    text-align: left;
	top:200px;
}

#main-image-container > #slideshow-controlsx {
    margin-bottom: -50px;
	margin:0 auto;
}

#slideshow-controlsx ul {
    position: relative;
    margin: 0;
    padding: 0px 0px 0px 0px;
    list-style: none inside;
	width:690px;
   /* background-color: #000;*/
 /*   opacity: 0.6;
    -moz-opacity: 0.6;
    filter: alpha(opacity=40);   Lower opacity for IE since the controls don't hide */
}

#slideshow-controlsx ul li {
    float: left;
    margin: 0;
    padding: 0;
}

#slideshow-controlsx button {
    width: 8px;
    height: 14px;
    /*margin: 0;
    padding: 0;*/
  /*  background-color: #000;*/
  	padding:0px;
    border: none;
    text-align: center;
    cursor: pointer;
}

Can anyone help me out with this please? Its driving me nuts!

James

My navbar on the left is pushing down all of my content in the centre. I was wondering if its possible to offset it being pushed down. Im guesing it would be something like float: top (im ignorant!). Could someone please tell me the best way of doing this?

Here is my site: http://zombiemod.com/rm/nina2/main.php?g2_itemId=13

If you hover over, you can see the lines along from the menu pushing the content down. I would like it to sit on the top. I beleive the code for this section is this:

Code:

  <div id="main-image-container">
    {if $theme.imageCount > 0}
      <div id="slideshow-controls">
        <ul id="control-buttons">
    <li><button id="controls-left">
      <img src="{g->theme url="images/controls-left.png"}" alt="{g->text text="Left"}" />
      </button></li>
    <li><button id="controls-play">
      <img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Play"}" />
      </button></li>
    <li><button id="controls-right">
      <img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Right"}" />
      </button></li>
        </ul>
      </div>

    <div id="sliding-frame">
      <div id="loading">
    {g->text text="Loading Album..."}
      </div>

      <p><img src="{g->theme url="images/blank.png"}"
      alt="{g->text text="Main image placeholder"}" id="main-image" /></p>
    </div>

Hi,

I think I know the problem, or at least one of the problems.

The arrows are actually sitting inline with the main image, not behind. As a result they are forcing the main image off to the right side.

Here is the code:

Code:

<div id="content">
  <div id="main-image-container"  {if $theme.imageCount == 0}style="display:none"{/if}>
    {if $theme.imageCount > 0}
      <div id="slideshow-controlsx">
        <ul id="control-buttonsx">
    <li><button id="controls-left"><img src="{g->theme url="images/controls-left.png"}" alt="{g->text text="Left"}" /></button></li>
    <li><button id="controls-play"><img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Play"}" /></button></li>
    <li><button id="controls-right"><img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Right"}" /></button></li>
        </ul>
      </div>

    <div id="sliding-frame">
      <div id="loading">
    {g->text text="Loading Album..."}
      </div>

      <p><img src="{g->theme url="images/blankx.png"}"
      alt="{g->text text="."}" id="main-image" /></p>
    </div>
    {/if}

Here is an image showing the problem:


Im sure there is code to make them sit on top of each other, is it something to do with the overflow or position: relevant tag?

I have a 3 column layout which is working fine so far except for one thing: the content in the 3rd column is pushed down, and starts at the horizontal level where the content in the center column finishes.

How do I prevent that from happening, and make the 3rd column content start at the top like the other 2 columns?

This is the CSS:

Code:

/*container div*/
#container {
	width: 770px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0; margin-top: 0;
	padding: 0px;
	text-align: left;
	font-size: 11px;
}

#contentleft {
        width: 180px;
        background: #fff;
        float: left;
        margin: 0;
        border-left: 1px solid #000; border-right: 1px solid #000;
}

#contentcenter {
	width: 454px;
	padding: 0px;
	float: left;
	margin: 0;

}

#contentright {
	width: 136px;
	padding: 0px;
	float: right;
	margin: 0;
	border-left: 1px solid #000; border-right: 1px solid #000;
}

Hi all,

I am trying to do a bottom line (contact info) in a css layout.

I am having the content area (98% height) and a bottom line (3%).
(101% because I want the scrollbar to be visible - FF jumping)

Now the problem is that FF interprets the 98% as 98% of the current window height. Even if the text is larger.

The bottom line then appears right in the middle of the text.

Example

IE interprets the height of the text (a nice little bug), but it works and displays the bottom line at the end of the page.

Here's the css for the containers:

Code:

#Container {
	height: 98%;
	width: 100%;
	background-image: url(img/main_background.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	min-height: 551px;
}

#Impressum {
	width:662px;
	height: 3%;
	height:auto;
	margin-right: auto;
	margin-left: auto;
}

Can someone give me a hint how to solve this FF problem?

Thanks in advance

Sven

I have a header box contained within a "wrap" box in the usual IE kludge to get it to deal with padding and centering consistently. When the page loads, I can see a small (approx 50px) blue-outlined box flash up. My header is specified as 738px wide, not about 50px, but it is blue-bordered. Wrap has no border.

In Firefox, the weird box then moves to the top of the screen, and things load as they should. The box disappears under the other elements.

In Blogger (this is actually a Blogger template), the small box first appears about half an inch down the screen, and then the page loads from that point down, and I'm left with half an inch of background I don't want. (page is he http://acid-test.blogspot.com if you'd like to see what I mean.) The behavior seems to be the same in IE. The little box disappears, as in Firefox, but seems to set the top of the page in some strange way.

Is there a command I can use in the stylesheet to force the elements to move to the top of the page? Is there any way I can find out what the weird little box is? And get rid of it? Does anyone have a clue what's going on? I sure don't.

Thanks for any help you folks can give me!

Hello. I have a page that has 3 main elements: a left nav menu (with float:left), a main contents section (with margin-left: 250px, and lines up beside the left nav menu), and a links section which embeds inside the content section. In IE7 and Firefox, the page displays correctly. In IE 6, the links section displays inside the content section, but the top of the links section lines up with the bottom of the left menu. What would cause this?

I am trying to make a layout with a background image with 3 content boxes layered on top of it. The first two boxes are position correctly. They are offset top, left and top, right respectively. The third box should be positioned bottom, left but for some reason it isn't working. The left offset is working correctly, but instead of positioning itself off of the bottom of the container div, it positions itself that much above the viewport. If I set the bottom property to negative something, it acts like a top offset. While this is a workaround, it does not provide acceptable functionality. Anyone have any ideas? I've had two friends who are both seasoned web developers look at this and they were both stumped. I can post images of what it looks like and what it should look like if desired. Both of these code sections are php generating the html and css respectively.

html:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
		<title><?=$title?></title>
		<link rel="stylesheet" type="text/css" href="./themes/<?=$theme?>/css/main.php" />
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("#bottom_ccw").attr({ scrollTop: $("#bottom_ccw").attr("scrollHeight") });
			});
		</script>
	</head>
	<body>
		<div id="wrapper">
			<div id="inner_wrapper">
				<div id="background"></div>
				<div id="left_bw">
					<div class="top_b">
						<div class="border_tl"></div>
						<div id="l_border_t"></div>
						<div class="border_tr"></div>
					</div>
					<div>
						<div id="l_border_l"></div>
						<div id="l_border_r"></div>
					</div>
					<div class="bot_b">
						<div class="border_bl"></div>
						<div id="l_border_b"></div>
						<div class="border_br"></div>
					</div>
				</div>
				<div id="left_ccw">
					<div id="cc1">
						<?for($i=0;$i<500;$i++):?>1	<?endfor;?>
					</div>
				</div>
				<div id="right_bw">
					<div class="top_b">
						<div class="border_tl"></div>
						<div id="r_border_t"></div>
						<div class="border_tr"></div>
					</div>
					<div>
						<div id="r_border_l"></div>
						<div id="r_border_r"></div>
					</div>
					<div class="bot_b">
						<div class="border_bl"></div>
						<div id="r_border_b"></div>
						<div class="border_br"></div>
					</div>
				</div>
				<div id="right_ccw">
					<div id="cc2">
						<?for($i=0;$i<1200;$i++):?>2	<?endfor;?>
					</div>
				</div>
				<div id="bottom_bw">
					<div class="top_b">
						<div class="border_tl"></div>
						<div id="b_border_t"></div>
						<div class="border_tr"></div>
					</div>
					<div>
						<div id="b_border_l"></div>
						<div id="b_border_r"></div>
					</div>
					<div class="bot_b">
						<div class="border_bl"></div>
						<div id="b_border_b"></div>
						<div class="border_br"></div>
					</div>
				</div>
				<div id="bottom_ccw">
					<div id="cc3">
						<?for($i=0;$i<200;$i++):?>3	<?endfor;?>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

css:
css Code:
Original - css Code <? header("Content-type: text/css"); ?> <? //Left content box width. $lcbw = 300; //Left content box height. $lcbh = 443; //Left content box horizontal offset. $lcbho = 100; //Left content box vertical offset. $lcbvo = 55; //Right content box width. $rcbw = 550; //Right content box height. $rcbh = 550; //Right content box horizontal offset. $rcbho = 100; //Right content box vertical offset. $rcbvo = 55; //Bottom content box width. $bcbw = 300; //Bottom content box height. $bcbh = 100; //Bottom content box horizontal offset. $bcbho = 100; //Bottom content box vertical offset. $bcbvo = 0; ?> /* Equalize the padding and margin for all elements across all browsers. */ * { padding: 0px; margin: 0px; } /* Generic top section for a content box. */ .top_b { clear: right; } /* Generic bottom section for a content box. */ .bot_b { clear: left; } /* Top left corner of a border. */ .border_tl { float: left; background: url('../images/main/border_tl.png'); width: 26px; height: 25px; } /* Top right corner of a border. */ .border_tr { float: left; background: url('../images/main/border_tr.png'); width: 26px; height: 25px; } /* Bottom left corner of a border. */ .border_bl { float: left; background: url('../images/main/border_bl.png'); width: 26px; height: 25px; } /* Bottom right corner of a border. */ .border_br { float: left; background: url('../images/main/border_br.png'); width: 26px; height: 25px; } /* Main site wrapper. */ #wrapper { margin: auto; width: 1057px; padding-top: 5px; } /* Main site inner wrapper. */ #inner_wrapper { position: relative; } /* The background element. */ #background { background: url('../images/main/background.png'); width: 1057px; height: 679px; position: absolute; z-index: 1; } /* Left content box borders wrapper. */ #left_bw { position: absolute; z-index: 2; top: <?=$lcbvo?>px; left: <?=$lcbho?>px; width: <?=$lcbw?>px; height: <?=$lcbh?>px; } /* Left content box top border. */ #l_border_t { float: left; background: url('../images/main/border_top.png'); width: <?=($lcbw-52)?>px; height: 14px; } /* Left content box left border. */ #l_border_l { float: left; background: url('../images/main/border_left.png'); width: 14px; height: <?=($lcbh-50)?>px; } /* Left content box right border. */ #l_border_r { float: right; background: url('../images/main/border_right.png'); width: 14px; height: <?=($lcbh-50)?>px; } /* Left content box bottom border. */ #l_border_b { margin-top: 11px; float: left; background: url('../images/main/border_bottom.png'); width: <?=($lcbw-52)?>px; height: 14px; } /* Left content container wrapper. */ #left_ccw { position: absolute; z-index: 3; top: <?=($lcbvo+14)?>px; left: <?=($lcbho+14)?>px; width: <?=($lcbw-28)?>px; height: <?=($lcbh-28)?>px; overflow: hidden; } /* Left content container. */ #cc1 { padding: 5px; } /* Right content box borders wrapper. */ #right_bw { position: absolute; z-index: 2; top: <?=$rcbvo?>px; right: <?=$rcbho?>px; width: <?=$rcbw?>px; height: <?=$rcbh?>px; } /* Right content box top border. */ #r_border_t { float: left; background: url('../images/main/border_top.png'); width: <?=($rcbw-52)?>px; height: 14px; } /* Right content box left border. */ #r_border_l { float: left; background: url('../images/main/border_left.png'); width: 14px; height: <?=($rcbh-50)?>px; } /* Right content box right border. */ #r_border_r { float: right; background: url('../images/main/border_right.png'); width: 14px; height: <?=($rcbh-50)?>px; } /* Right content box bottom border. */ #r_border_b { margin-top: 11px; float: left; background: url('../images/main/border_bottom.png'); width: <?=($rcbw-52)?>px; height: 14px; } /* Right content container wrapper. */ #right_ccw { position: absolute; z-index: 3; top: <?=($rcbvo+14)?>px; right: <?=($rcbho+14)?>px; width: <?=($rcbw-28)?>px; height: <?=($rcbh-28)?>px; overflow: hidden; } /* Right content container. */ #cc2 { padding: 5px; } /* Bottom content box borders wrapper. */ #bottom_bw { position: absolute; z-index: 2; bottom: <?=$bcbvo?>px; left: <?=$bcbho?>px; width: <?=$bcbw?>px; height: <?=$bcbh?>px; } /* Bottom content box top border. */ #b_border_t { float: left; background: url('../images/main/border_top.png'); width: <?=($bcbw-52)?>px; height: 14px; } /* Bottom content box left border. */ #b_border_l { float: left; background: url('../images/main/border_left.png'); width: 14px; height: <?=($bcbh-50)?>px; } /* Bottom content box right border. */ #b_border_r { float: right; background: url('../images/main/border_right.png'); width: 14px; height: <?=($bcbh-50)?>px; } /* Bottom content box bottom border. */ #b_border_b { margin-top: 11px; float: left; background: url('../images/main/border_bottom.png'); width: <?=($bcbw-52)?>px; height: 14px; } /* Bottom content container wrapper. */ #bottom_ccw { position: absolute; z-index: 3; bottom: <?=($bcbvo+14)?>px; left: <?=($bcbho+14)?>px; width: <?=($bcbw-28)?>px; height: <?=($bcbh-28)?>px; overflow-x: hidden; overflow-y: scroll; } /* Bottom content container. */ #cc3 { padding: 5px; }

  

  


 <? header("Content-type: text/css"); ?>


 <?


     //Left content box width.


     $lcbw = 300;


     //Left content box height.


     $lcbh = 443;


     //Left content box horizontal offset.


     $lcbho = 100;


     //Left content box vertical offset.


     $lcbvo = 55;


     


     //Right content box width.


     $rcbw = 550;


     //Right content box height.


     $rcbh = 550;


     //Right content box horizontal offset.


     $rcbho = 100;


     //Right content box vertical offset.


     $rcbvo = 55;


     


     //Bottom content box width.


     $bcbw = 300;


     //Bottom content box height.


     $bcbh = 100;


     //Bottom content box horizontal offset.


     $bcbho = 100;


     //Bottom content box vertical offset.


     $bcbvo = 0;


 ?>


  


 /* Equalize the padding and margin for all elements across all browsers. */


 * {


     padding: 0px;


     margin: 0px;


 }


  


 /* Generic top section for a content box. */


 .top_b {


             clear: right;


         }


  


 /* Generic bottom section for a content box. */


 .bot_b {


             clear: left;


         }


  


 /* Top left corner of a border. */


 .border_tl {


                 float: left;


                 background: url('../images/main/border_tl.png');


                 width: 26px;


                 height: 25px;


             }


  


 /* Top right corner of a border. */


 .border_tr {


                 float: left;


                 background: url('../images/main/border_tr.png');


                 width: 26px;


                 height: 25px;


             }


  


 /* Bottom left corner of a border. */


 .border_bl {


                 float: left;


                 background: url('../images/main/border_bl.png');


                 width: 26px;


                 height: 25px;


             }


  


 /* Bottom right corner of a border. */


 .border_br {


                 float: left;


                 background: url('../images/main/border_br.png');


                 width: 26px;


                 height: 25px;


             }


  


 /* Main site wrapper. */


 #wrapper {


             margin: auto;


             width: 1057px;


             padding-top: 5px;


         }


  


 /* Main site inner wrapper. */


 #inner_wrapper {


             position: relative;


         }


  


 /* The background element. */


 #background {


                 background: url('../images/main/background.png');


                 width: 1057px;


                 height: 679px;


                 position: absolute;


                 z-index: 1;


             }


  


 /* Left content box borders wrapper. */


 #left_bw {


                 position: absolute;


                 z-index: 2;


                 top: <?=$lcbvo?>px;


                 left: <?=$lcbho?>px;


                 width: <?=$lcbw?>px;


                 height: <?=$lcbh?>px;


             }


  


 /* Left content box top border. */


 #l_border_t {


                 float: left;


                 background: url('../images/main/border_top.png');


                 width: <?=($lcbw-52)?>px;


                 height: 14px;


             }


  


 /* Left content box left border. */


 #l_border_l {


                 float: left;


                 background: url('../images/main/border_left.png');


                 width: 14px;


                 height: <?=($lcbh-50)?>px;


             }


  


 /* Left content box right border. */


 #l_border_r {


                 float: right;


                 background: url('../images/main/border_right.png');


                 width: 14px;


                 height: <?=($lcbh-50)?>px;


             }


  


 /* Left content box bottom border. */


 #l_border_b {


                     margin-top: 11px;


                     float: left;


                     background: url('../images/main/border_bottom.png');


                     width: <?=($lcbw-52)?>px;


                     height: 14px;


                 }


  


 /* Left content container wrapper. */


 #left_ccw {


                 position: absolute;


                 z-index: 3;


                 top: <?=($lcbvo+14)?>px;


                 left: <?=($lcbho+14)?>px;


                 width: <?=($lcbw-28)?>px;


                 height: <?=($lcbh-28)?>px;


                 overflow: hidden;


             }


  


 /* Left content container. */


 #cc1 {


             padding: 5px;


         }


  


 /* Right content box borders wrapper. */


 #right_bw {


                 position: absolute;


                 z-index: 2;


                 top: <?=$rcbvo?>px;


                 right: <?=$rcbho?>px;


                 width: <?=$rcbw?>px;


                 height: <?=$rcbh?>px;


             }


  


 /* Right content box top border. */


 #r_border_t {


                 float: left;


                 background: url('../images/main/border_top.png');


                 width: <?=($rcbw-52)?>px;


                 height: 14px;


             }


  


 /* Right content box left border. */


 #r_border_l {


                 float: left;


                 background: url('../images/main/border_left.png');


                 width: 14px;


                 height: <?=($rcbh-50)?>px;


             }


  


 /* Right content box right border. */


 #r_border_r {


                 float: right;


                 background: url('../images/main/border_right.png');


                 width: 14px;


                 height: <?=($rcbh-50)?>px;


             }


  


 /* Right content box bottom border. */


 #r_border_b {


                     margin-top: 11px;


                     float: left;


                     background: url('../images/main/border_bottom.png');


                     width: <?=($rcbw-52)?>px;


                     height: 14px;


                 }


  


 /* Right content container wrapper. */


 #right_ccw {


                 position: absolute;


                 z-index: 3;


                 top: <?=($rcbvo+14)?>px;


                 right: <?=($rcbho+14)?>px;


                 width: <?=($rcbw-28)?>px;


                 height: <?=($rcbh-28)?>px;


                 overflow: hidden;


             }


  


 /* Right content container. */


 #cc2 {


             padding: 5px;


         }


  


 /* Bottom content box borders wrapper. */


 #bottom_bw {


                 position: absolute;


                 z-index: 2;


                 bottom: <?=$bcbvo?>px;


                 left: <?=$bcbho?>px;


                 width: <?=$bcbw?>px;


                 height: <?=$bcbh?>px;


             }


  


 /* Bottom content box top border. */


 #b_border_t {


                 float: left;


                 background: url('../images/main/border_top.png');


                 width: <?=($bcbw-52)?>px;


                 height: 14px;


             }


  


 /* Bottom content box left border. */


 #b_border_l {


                 float: left;


                 background: url('../images/main/border_left.png');


                 width: 14px;


                 height: <?=($bcbh-50)?>px;


             }


  


 /* Bottom content box right border. */


 #b_border_r {


                 float: right;


                 background: url('../images/main/border_right.png');


                 width: 14px;


                 height: <?=($bcbh-50)?>px;


             }


  


 /* Bottom content box bottom border. */


 #b_border_b {


                     margin-top: 11px;


                     float: left;


                     background: url('../images/main/border_bottom.png');


                     width: <?=($bcbw-52)?>px;


                     height: 14px;


                 }


  


 /* Bottom content container wrapper. */


 #bottom_ccw {


                 position: absolute;


                 z-index: 3;


                 bottom: <?=($bcbvo+14)?>px;


                 left: <?=($bcbho+14)?>px;


                 width: <?=($bcbw-28)?>px;


                 height: <?=($bcbh-28)?>px;


                 overflow-x: hidden;


                 overflow-y: scroll;


             }


  


 /* Bottom content container. */


 #cc3 {


             padding: 5px;


         } 

Sorry I tried to get the HTML to highlight too but it wouldn't work.

Screenshot of how it looks:
http://i34.photobucket.com/albums/d105/alphasynaptic/wrong.jpg

Screenshot of how it should look (done with my hacky workaround):
http://i34.photobucket.com/albums/d105/alphasynaptic/right.jpg

I am testing a three column layout with a header and a footer using only CSS. Ordinarily it works fine but when the center column has less height than the left or right columns (due to amount of content in each) then the footer overlaps the left or right column as it positions itself to just below the center column.

Can anyone figure out why? I am baffled since the footer has an absolute position of left: 0px and bottom: 0px;

Here is my HTML:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>page title</title>
<style type="text/css">
body {
	margin:0px;
	padding:0px;
	height: 100%;
}
.left-col { 
	position: absolute; 
	width: 150px;
	top: 130px; 
	left: 0px;
	padding-left: 3px;
	z-index: 2;
}

.right-col {	
	position: absolute; 
	width: 150px;
	top: 120px;
	right: 0;
	padding-right: 3px;	
	z-index: 1;
	overflow: hidden;
	clear: both;
}

.center-col {
	position: relative;
	min-width: 300px;
	min-height: 100%;
	height: 100%;
	z-index: 3;
	top: 140px;
	margin: 0px 160px 150px 170px;
	text-align: left;
	padding:5px;
}

.heading { 
	position: absolute;
	left: 0px;
	top: 0px;
}

.footer {
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 0px;
	z-index: 3;
	padding-top: 25px;
	margin: 0px;
	display: block;
}

.footer-bar {
	width: auto;
	padding:10px 3px 3px 0px;
	clear: both;
	background-color: gray;
	vertical-align: bottom;
	text-align: center;
}
</style>
</head>
<body>
<div class="center-col">
	center content<br />
	center content<br />
	center content<br />
	center content<br />
</div>

<div class="left-col">
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
</div>

<div class="right-col">
	right content<br /><br />
	right content<br /><br />
	right content<br /><br />
	right content<br /><br />
	right content<br /><br />
	right content<br /><br />
	right content<br /><br />
	right content<br /><br />
	right content<br /><br />
</div>

<div class="heading">
	head content
</div>

<div class="footer">
	<div class="footer-bar">page bottom</div>
</div>
</body>
</html>

On this page: http://www.artquestbeauty.com/css/facials.html, the images appear just the way I want them to.

On this page: http://www.artquestbeauty.com/css/skintreatments.html the image of the girl in the orange dress is pushed way down in the div, though I inserted it right next to the "Back Facial" heading.

I have a lot of "sandbag" divs that wrap the text around the background image and around the leftimage div. I was thinking this was the problem, but since it works fine on other pages, I'm back to square one. Can anyone see what I'm missing?


THe HTML:
Code:

<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Skin Care and Permanent Cosmetics in Canyon Lake, Texas - AQB</title>  <link href="menu.css" rel="stylesheet" type="text/css" />  <link href="wrap.css" rel="stylesheet" type="text/css" /> <style type="text/css">  </style> </head>  <body>  <div id="content"><!-- #BeginLibraryItem "/Library/menudropdown.lbi" --><div id="menuholder"><ul id="menu">     <li><a href="../Library/index.html">Home</a>       </li>     <li><a href="../Library/about.html">About</a></li>     <li><a href="../Library/contact">Contact Us</a></li>     <li><a href="#">Services<img src="images/triangle.png" alt="SkinCareServices" width="18" height="12" border="0" /></a>       <ul>         <li><a href="#">Condition-Specific Treatments</a></li>         <li><a href="../Library/facials">Facials</a></li>         <li><a href="#">Home Care</a></li>         <li><a href="#">Lash and Brow Tinting</a></li>         <li><a href="#">Lash Extensions</a></li>         <li><a href="#">Makeup Application</a></li>         <li><a href="#">Permanent Makeup</a></li>         <li><a href="#">Skin Growth Removal</a></li>         <li><a href="#">Tattoos</a></li>         <li><a href="#">Tattoo Removal</a></li>         <li><a href="#">Waxing</a></li>         </ul>       </li>          <li><a href="#">Testimonials</a></li>     <li><a href="#">FAQs</a></li>        </ul></div><!-- #EndLibraryItem --><div id="foot"><ul>     <li>Patsy Keim       </li>     <li>1395 Sattler Road Suite #2</li>     <li> Canyon Lake Professional Building       </li>     <li>Canyon Lake, TX 78132       </li>     <li>830 964-4315<br />       <a href="contact.html">Contact Us</a>       </li>   </ul>Website design by <a href="http://www.ontargetpro.com" target="_blank">On Target</a>.        <!--end of foot div--></div>   <div id="top"></div>   <div id="intro"> <!--sandbag divs--> <div id="sb1"><span></span></div> <div id="sbr1"></div> <div id="sb2permanentmakeup"><span></span></div> <div id="sbr2"></div> <div id="sbr3"></div> <div id="sbr4"></div> <div id="sbr5"></div> <div id="sbr6"></div> <div id="sbr7"></div> <div id="sbr8"></div> <div id="sbr9"></div> <div id="sbr10"></div> <!--end sandbag divs-->     <h1>Permanent Cosmetics</h1>     <p>See also <a href="faq.html">FAQs</a>.</p>     <p>Women all over are finding that permanent makeup is perfect for them. Whatever look you choose, you can work, exercise, shower or swim and always look your best. A skilled technician can offer suggestions and help you choose colors that are most complimentary with your skin tone. </p>     <p>Call 830 964-4315 today for your free consultation!</p>     <h3>A Brief History of Permanent Cosmetics</h3>     <p>Cosmetic tattooing first became popular in 1984, when Dr. Geora Angres published his now famous landmark article on the use of eyelash tattooing to create an eyeliner effect for cosmetic purposes. In the 1990s, states began regulati<img src="../Images/clientphotos/browsandliner.jpg" alt="Brow and Liner Permanent Makeup" width="400" height="200" class="align-left" />ng permanent cosmetics and today more than 15,000 technicians are practicing world-wide. In the US, one in four women has a tattoo and 8 million have permanent cosmetics.</p>     <h3><br />     Safety and Comfort Concerns</h3>     <p>Modern pigments that contain inert organic and inorganic compounds remain stable when implanted into the skin, are hypo-allergenic, fade-resistant and are MRI-safe because they do not contain ferromagnetics or heavy metals such as iron oxides. With the use of topical anesthetic creams, there is very little discomfort. Infections or allergic reactions are very rare. <img src="../Images/clientphotos/PermCos/LipsBeforeAfter.jpg" alt="Permanent Cosmetics" width="574" height="113" class="align-left" />However, a small spot test can be requested if you are concerned. </p>     <h3>Some Permanent Cosmetic Options</h3>     <p>Your natural eyebrows can be a basic guideline to follow for penciling-in or can be a total brow re-creation. Anything from a few hair strokes to fill those sparse spots or scarred areas to fully colored brows can be created and cost between $250 to $750.</p>     <p>Eyeliner can be applied in many styles, widths and colors, from a natural looking lash enhancement to a defined line, and costs $250 to $750. Mucosal liner really opens up the eyes and can cost $300 to $500.</p>     <p>Lip liner give lips more definition, can correct unevenness, or add fullness and costs from $350 to $850. Full lip color (see photo below) can be applied in either a natural hue or a more vivid one, and costs $400 to $1500.</p>     <p>Paramedical procedures, such as areola reconstruction range from $150 to $500 per hour.</p> <h2>Call today for your free skin analysis and consultation.</h2>  </div>   <div id="leftimagepermanentmakeup"></div>   <!--end of text div--> </div>   </body> </html>

Here's the css:
Code:

@charset "utf-8"; /* CSS Document */ html { 	text-align: center; }  body { 	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; 	text-align: center; 	margin: 0px; 	padding: 0px; } #content { 	position:relative; 	min-height:852px; 	z-index:1; 	background-image: url(images/bgdouble.jpg); 	background-position: right top; 	border: thin solid #E8D7B9; 	text-align: center; 	margin: auto; 	width: 1000px; 	background-repeat: repeat-y; } #text { 	top: 212px; 	border: medium none #069; 	position: absolute; 	height: 103px; 	width: 630px; 	text-align: justify; }  #top { 	position:relative; 	width:1000px; 	height:215px; 	z-index:2; 	background-image: url(images/top.png); 	background-repeat: no-repeat; 	top: 30px; 	margin-top: 0px; 	margin-right: auto; 	margin-bottom: 0px; 	margin-left: auto; }  #leftimage { 	position:absolute; 	width:250px; 	height:300px; 	z-index:2; 	left: -20px; 	top: 342px; 	border: thin double #E8D7B9; 	background-image: url(../Images/PerfectSkin1.jpg); 	background-repeat: no-repeat; 	background-position: left top; 	background-color: #FFF; } #leftimageabout { 	position:absolute; 	width:250px; 	height:400px; 	z-index:2; 	left: -20px; 	top: 342px; 	border: thin double #E8D7B9; 	background-color: #FFF; 	text-align: left; 	list-style-image: url(images/flowerbullet.png); } #leftimagefacials { 	position:absolute; 	width:250px; 	height:700px; 	z-index:2; 	left: -20px; 	top: 342px; 	border: thin double #E8D7B9; 	background-image: url(../Images/facial.jpg); 	background-repeat: no-repeat; 	background-position: left top; 	background-color: #FFF; 	text-align: left; } #leftimagehomecare { 	position:absolute; 	width:250px; 	height:212px; 	z-index:2; 	left: -20px; 	top: 342px; 	border: thin double #E8D7B9; 	background-image: url(../Images/skincondition1.jpg); 	background-repeat: no-repeat; 	background-position: left top; 	background-color: #FFF; 	text-align: left; } #leftimagemakeup { 	position:absolute; 	width:250px; 	height:270px; 	z-index:2; 	left: -20px; 	top: 342px; 	border: thin double #E8D7B9; 	background-image: url(../Images/clientphotos/makeup1.jpg); 	background-repeat: no-repeat; 	background-position: left center; 	background-color: #FFF; 	text-align: left; } #leftimageskintreatments { 	position:absolute; 	width:250px; 	height:270px; 	z-index:2; 	left: -20px; 	top: 342px; 	border: thin double #E8D7B9; 	background-image: url(../Images/SkinProblem1.jpg); 	background-repeat: no-repeat; 	background-position: left center; 	background-color: #FFF; 	text-align: left; } #leftimagestattoos { 	position:absolute; 	width:250px; 	height:270px; 	z-index:2; 	left: -20px; 	top: 342px; 	border: thin double #E8D7B9; 	background-image: url(../Images/tattoo1.jpg); 	background-repeat: no-repeat; 	background-position: left center; 	background-color: #FFF; 	text-align: left; } #leftimagefaq { 	position:absolute; 	width:250px; 	height:300px; 	z-index:2; 	left: -20px; 	top: 342px; 	border: thin double #E8D7B9; 	background-image: url(../Images/enzymepeel.jpg); 	background-repeat: no-repeat; 	background-position: left center; 	background-color: #FFF; 	text-align: left; } #leftimagelashandbrow { 	position:absolute; 	width:250px; 	height:300px; 	z-index:2; 	left: -20px; 	top: 342px; 	border: thin double #E8D7B9; 	background-image: url(../Images/eyelashes1.jpg); 	background-repeat: no-repeat; 	background-position: left center; 	background-color: #FFF; 	text-align: left; } #leftimagepermanentmakeup { 	position:absolute; 	width:250px; 	height:300px; 	z-index:2; 	left: -20px; 	top: 342px; 	border: thin double #E8D7B9; 	background-image: url(../Images/permanentcosmetics1.jpg); 	background-repeat: no-repeat; 	background-position: left center; 	background-color: #FFF; 	text-align: left; } #intro { 	position:relative; 	width:auto; 	z-index:3; 	top: -30px; 	margin-top: 0px; 	margin-right: auto; 	margin-left: auto; 	left: 6px; 	padding-left: 5px; 	text-align: justify; 	list-style-position: outside; 	list-style-type: disc; } h1 { 	font-size: 24px; 	font-weight: bold; 	color: #CAA560; 	font-style: oblique; 	letter-spacing: 0.2em; 	text-align: center; } h2 { 	font-size: 16px; 	color: #791B1B; 	font-style: italic; 	letter-spacing: .1em; 	padding-left: 24px; 	background-image: url(images/star.png); 	background-repeat: no-repeat; 	background-position: left top; 	height: 23px; } #foot { 	position:absolute; 	width:1000px; 	height:35px; 	z-index:2; 	bottom: -55px; 	padding-bottom: 0px; } #foot ul li { 	display: inline; 	list-style-type: disc; 	padding-left: 25px; 	background-image: url(images/star.png); 	background-repeat: no-repeat; 	background-position: left; } #middle { 	position:absolute; 	width:383px; 	height:316px; 	z-index:3; 	top: 315px; 	left: 249px; } #underimage { 	position:absolute; 	width:630px; 	height:115px; 	z-index:2; 	top: 630px; } #sb1{ 	width: 1px; 	height: 130px; 	float: left; 	clear: left; 	margin: 0px; 	padding: 0px; } 	 #sb2 { 	width: 225px; 	height: 400px; 	float: left; 	clear: left; 	margin: 0px; 	padding: 0px; } #sbr1{ 	width: 375px; 	height: 130px; 	float: right; 	clear: right; 	margin: 0px; 	padding: 0px; } 	 #sbr2 { 	width: 375px; 	height: 115px; 	float: right; 	clear: right; 	margin: 0px; 	padding: 0px; } #sbr3 { 	width: 375px; 	height: 20px; 	float: right; 	clear: right; 	margin: 0px; 	padding: 0px; } #sbr4 { 	width: 400px; 	height: 120px; 	float: right; 	clear: right; 	margin: 0px; 	padding: 0px; } #sbr5 { 	width: 325px; 	height: 80px; 	float: right; 	clear: right; 	margin: 0px; 	padding: 0px; } #sbr6 { 	width: 375px; 	height: 80px; 	float: right; 	clear: right; 	margin: 0px; 	padding: 0px; } #sbr7 { 	width: 475px; 	height: 180px; 	float: right; 	clear: right; 	margin: 0px; 	padding: 0px; } #sbr8 { 	width: 365px; 	height: 85px; 	float: right; 	clear: right; 	margin: 0px; 	padding: 0px; } #sbr9 { 	width: 350px; 	height: 115px; 	float: right; 	clear: right; 	margin: 0px; 	padding: 0px; } #sbr10 { 	width: 375px; 	height: 2455px; 	float: right; 	clear: right; 	margin: 0px; 	padding: 0px; } #sb2homecare { 	width: 225px; 	height: 230px; 	float: left; 	clear: left; 	margin: 0px; 	padding: 0px; 	list-style-image: url(images/flowerbullet.png); } #sb2facials { 	width: 225px; 	height: 700px; 	float: left; 	clear: left; 	margin: 0px; 	padding: 0px; 	list-style-image: url(images/flowerbullet.png); }  #sb2makeup { 	width: 225px; 	height: 275px; 	float: left; 	clear: left; 	margin: 0px; 	padding: 0px; ; } #sb2skintreatments { 	width: 225px; 	height: 275px; 	float: left; 	clear: left; 	margin: 0px; 	padding: 0px; ; }#sb2tattoos { 	width: 225px; 	height: 275px; 	float: left; 	clear: left; 	margin: 0px; 	padding: 0px; ; } #sb2faq { 	width: 225px; 	height: 315px; 	float: left; 	clear: left; 	margin: 0px; 	padding: 0px; ; }    #sb2lashandbrow { 	width: 225px; 	height: 320px; 	float: left; 	clear: left; 	margin: 0px; 	padding: 0px; ; }  #sb2permanentmakeup { 	width: 225px; 	height: 320px; 	float: left; 	clear: left; 	margin: 0px; 	padding: 0px; ; }         .align-right { float:right; margin: 0 0 15px 15px; }         .align-left { float:left; margin: 0 15px 15px 0; }

I've spent the last two days struggling, trying to get the footer to stay at the bottom of the window and the two right most columns in my layout to stretch to the footer. I've search this site thorough for answers, and yes, there were many of them. But still, after implementing everyone I came across, I can't get the layout to do the above criteria in both IE and Firefox.

HTML
Code:

<!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">
<head>
<title>Mall</title>
<link href="css/template.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
	<div id="main">
		<div id="header">
			<div id="ecommerce">
				<div id="logo"><img src="images/logo.jpg" width="188" height="18" alt="Mall" title="Mall" border="0" /></div>
				<div id="text"><a href=""><img src="images/cart.gif" width="16" height="16" alt="Master Basket" title="Master Basket" border="0" />&nbsp;Basket</a>&nbsp;|&nbsp;<a href="">Register</a>&nbsp;|&nbsp;<a href="">Login</a></div>
			</div>
			<div id="content">
				<div id="searchform">
					<form>
						<fieldset>
						<legend>Search Shopping Mall</legend>
							<div id="search_btn"><input type="submit" value="Search" class="button" /></div>
							<div id="search_type">
								<select>
									<option>Products</option> 
									<option selected="selected">Stores</option>
								</select>
							</div>
							<div id="search_input"><input type="text" name="query" id="query" value="" size="22" maxlength="200" /></div>
						</fieldset>
					</form>
				</div>  <!-- end searchform -->
			</div>  <!-- end content -->
		</div> <!-- end header -->
		<div id="mall">	
			<!-- top navigation -->
			<div id="topnav">
				<div id="nav-container">
				  <ul id="nav">
					<li id="nav-home"><a href="index.html" accesskey="1">Home</a></li>
					<li id="nav-browse"><a href="browse.html" accesskey="2">Browse Mall</a></li>
					<li id="nav-getastore"><a href="getastore.html" accesskey="3">Get A Store</a></li>
					<li id="nav-featstore"><a href="featstore.html" accesskey="4">Featured Store</a></li>
					<li id="nav-featitem"><a href="featitem.html" accesskey="5">Featured Item</a></li>
					<li id="nav-aboutus"><a href="aboutus.html" accesskey="6">About Us</a></li>
					<li id="nav-contactus"><a href="contactus.html" accesskey="7">Contact Us</a></li>
					<li id="nav-help"><a href="help.html" accesskey="8">Help</a></li>
				  </ul>
				</div>
			</div>
			<!--<div id="topnav">
				<div id="menu"><a href="index.html">Home</a><span id="sp"><img src="images/navsp.gif" align="absmiddle" /></span><a href="browse.php">Browse Mall</a><span id="sp"><img src="images/navsp.gif" align="absmiddle" /></span><a href="">Get A Store</a><span id="sp"><img src="images/navsp.gif" align="absmiddle" /></span><a href="">Featured Stores</a><span id="sp"><img src="images/navsp.gif" align="absmiddle" /></span><a href="browse.php">Featured Items</a><span id="sp"><img src="images/navsp.gif" align="absmiddle" /></span><a href="">About Us</a><span id="sp"><img src="images/navsp.gif" align="absmiddle" /></span><a href="">Contact Us</a><span id="sp"><img src="images/navsp.gif" align="absmiddle" /></span><a href="">Help</a></div>
			</div>-->
			<!-- banner image -->
			<div id="banner"><img src="images/banner.jpg" width="764" height="150" alt="Welcome to the Mall!" title="Welcome to the Mall!" border="0" /></div>
			<div id="midspacer"></div>
			<div id="mallbody">
				<!-- left navigation -->
				<div id="leftnav">
					<div class="menu_topleftcorner"><img src="images/menu_topleftcorner.jpg" width="6" height="6" border="0" /></div>
					<br/>
					<div class="sections">Mall Categories</div>
					<div id="navcontainer">
					<ul id="navlist">
						<li id="active"><a href="#" id="current">Home</a></li>
						<li><a href="">Books, Music & Movies</a></li>
						<li><a href="">Clothing & Apparel</a></li>
					</ul>
					</div>
					<br/>
					<div class="sections">Shop by Store</div>
					<ul id="navlist">
						<li id="active"><a href="#">Salsa Products</a></li>
					</ul>
					<div class="menusp"></div>
					<div class="menu_bottomleftcorner"><img src="images/menu_bottomleftcorner.jpg" width="6" height="6" border="0" /></div>
				</div>
				
				<!-- content -->
				<div id="content">
					<p><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/></p>
				</div>
				
				<!-- right navigation -->
				<div id="rightnav">
					<p></p>
				</div>
			</div>
			
		</div> <!-- end mall -->		
	</div> <!-- end main --> 
</div> <!-- end wrapper -->
<div id="footer">
	<div id="bg">
	ads ad ad a
	</div>	
	<div id="compliant">	
		<a href="http://validator.org/check/referer" target="_blank"><img src="images/compliant/w3cxhtml10.png" width="80" height="15" alt="W3C XHTML 1.0 Validated" title="W3C XHTML 1.0 Validated" border="0" /></a>&nbsp;
		<a href="http://jigsaw.w3.org/check/referer" target="_blank"><img src="images/compliant/w3ccss.png" width="80" height="15" alt="W3C CSS 1.0 Validated" title="W3C CSS 1.0 Validated" border="0" /></a>&nbsp;
		<a href="http://www.mozilla.org" target="_blank"><img src="images/compliant/mozilla.png" width="80" height="15" alt="Mozilla Firefox Browser Compatible" title="Mozilla Firefox Browser Compatible" border="0" /></a>
	</div>
</div> <!-- end footer -->
</body>
</html>

PS - Kravitz, I've check alot of the links you have posted. While they were helpful, I wasn't successful in implemented many of the techniques suggested in them to solve my problems.

I am modifying an X-Cart implementation that the template originally put the product image in a seperate td. I have modified it to put the image in the same td as the description and used a float style on a div tag. The text is wrapping correctly. The problem is that I have a border-bottom style on the product name and it is ending up under the product image. The image is also covering the bullet on li tags.

An example is http://www.adaappliances.com/produc...48&cat=0&page=1.

Please do not attempt to order anything! This is not a live site yet.

This is a snippet of the code. I am using inline styles for testing.
Code:

<div style="float:left; padding:5px">
<IMG id="product_thumbnail" src="/image.php?productid=16148" width="168" height="230" alt="Eurotech EDW254E Dishwasher" border="0"></div>
<p style="border-bottom: 1px solid black"><font size="3"><strong>Eurotech EDW254E Dishwasher </strong></font></p>

I have not found a way to fix this. Any suggestions?