CSS - Two Column Centered Layout With Scrolling Content, Header & Footer Issues

I'm having two issues with IE on my site.

1. IE is displaying the body background image (bg.jpg) throughout the entire page.

2. IE is pushing the sidebar way down.

Neither of these issues exist in Firefox. I think the second issue may have something to do with the first issue. Here is the relevant code.

Code:

html,body * {
padding:0px;
margin:0px;
}

body {
background-image:url(images/bg.jpg);
background-repeat:repeat-x;
background-color:#fb7d21;
margin:0 auto;
height:100%;
}

div#container {
width:792px;
margin:0 auto;
background-image:url(images/filler.jpg);
background-repeat:repeat-y;
}

div#header {
width:792px;
height:109px;
background-image:url(images/header.jpg);
background-repeat:no-repeat;
margin-top:20px;
}

div#content {
float:left;
width:570px;
padding:0 0 0 10px;
margin-top:-40px;
}

div#sidebar {
float:right;
width:212px;
margin-top:-95px;
}

div#footer {
clear:both;
width:792px;
height:84px;
background-image:url(images/footer.jpg);
background-repeat:no-repeat;
}

You can see the issues on my site here.

Any idea what is causing this?

Thanks in advance.

Trying to delete my post but no option to delete so just removing content.

Using my http://www.thatspotonline.com as an example I'll explain my problem. I'm trying to use a 3 column fluid layout with a header and a footer. I've gotten past the browser problem with IE and now face a new problem with proper display in firefox. With the included css and attached xhtml layout I end up with a rather large gap on the bottom of the design without adding quite a bit of content to make the page length grow. I've tested with about everything else and this problem doesn't show up. I would gladly take some advise if anyone has any thanks.
Code:

* {
    margin:0 auto;
	padding:0;
}
h2 {
	font:bold 2em/1.4 "Lucida Bright", Georgia, Times, serif;
	color:#8B9F86;
}
h3 {
	font:bold 1em/1.6 "Lucida Bright", Georgia, Times, serif;
	color:#845697;
}

a {
	color:#4C53E0;
}
a:focus, a:hover, a:active {
	color:#EB8518;
}

body {
	background:#000000 url(images/body2.jpg);
	background-repeat:repeat;
	background-position:top left;
	font-size:90%;
	margin:0 auto;
	padding: 24px 0;
}

#outer {
    margin:0 auto;
	width:80%;
    min-width:40em;
    max-width:70em;
	border:10px solid #EEEEEE;
	border-width:0 5px;
    background:#EEEEEE;
}

ul#nav:after, #outer:after, #sub:after, form:after, form div:after {
    content:".";
    display:block;
    visibility:hidden;
    clear:both;
    height:0;
}
* html #nav, * html #content, * html form, * html form div {
	height:1%;
}

ul#access, .off {
	position:absolute;
	left:-1000em;
	top:-1000em;
}

hr {display:none}


#header {
	background:#EBEBE9 url(images/banner-bg2.jpg) repeat-x left bottom;
}
#header h1 {
    padding-left:.6em;
    font:bold 3em/2.5 "Lucida Bright", Georgia, Times, serif; /* line-height allows for image of buildings */
    letter-spacing:1pt;
	color:#FFFFFF;
    background: transparent url(images/banner2.jpg) no-repeat right bottom; 
}
#header h1 a {
	color:#FFFFFF;
	text-decoration:none;
}

ul#nav {
   	list-style:none;
   	margin:3px 0 1em;
	text-align:center;
   	background:#FFFFFF;
   	border-top:2px solid #444444;
   	border-bottom:2px solid #444444;
}
#nav li {
    list-style:none;
    margin:0 auto;
	width:94%;
    min-width:40em;
    max-width:70em;
	display:block;
    text-align:center;
	background:#000000;
}
* html #nav li {
	width:24.9%;
}
#nav a {
    display:block;
	font:bold 1em/1.8 'Lucida Grande', Arial, tahoma, verdana, sans-serif;
	text-decoration:none;
	color:#444444;
	margin:1px;
	background:#FFFFFF;
}
#nav a:focus, #nav a:hover, #nav a:active {
	border:1px inset #8B9F86;
	margin:0;
	color:#EB8518;
	text-decoration:underline;
}

ul#nav li#active {
	background:#FFFFFF;
	font:bold 1em/1.8 'Lucida Grande', Arial, tahoma, verdana, sans-serif;
	color:#000000;
	text-decoration:underline;
}

#sub, #right {
	font: 1em/1.5 'Lucida Grande', arial, verdana, sans-serif;
	word-spacing:.1em;
	margin-bottom:1em;
}

#sub {
	width:74%;
	float:left;
	position:relative;
}

#center {
	width:65%;
	float:right;
}
#left {
	width:33%;
	float:left;
}
#right {
	width:25%;
	float:right;
}
 

#center p {
	margin:.5em 2% .5em 0;
}
img.img-right {
	float:right;
}


#left h2 {
	color:#845697;
	font-size:1.5em;
}
#left p {
	font-size:.9em;
}

#right {
	font-size:.9em;
}
#right h2 {
	font-size:1.2em;
}

/** Footer **/
#footer {
	clear:both;
	margin-top:1em;
	font: 0.9em/1 'Lucida Grande', arial, tahoma, verdana, sans-serif;
	border-top:3px double #C8DCC2;
	
}
#footer p {
	margin:1em 1em 1em 0;
	text-align:center;
	padding: 21px 0;
}
#footer ul {
	list-style:none;
	margin-top:.7em;
	
}
#footer li {
	display:inline;
	border-right: 1px solid #C8DCC2;
	padding:.3em 2%;
}

Hello. Im new to the forums and Im hoping someone would be able to help me and I hope Im posting in the correct forum. I recently redesigned my site with Adobe Dreamweaver utilizing CSS. Both the HTML and CSS validates. I have tried to search for my problem but havent found it already addressed. I had CSS before but my old software didnt support it as well. Im still learning a lot about the CSS so my problem might be minor, but I just dont have enough knowledge yet to know or to even begin to fix it.

The site appeared fine in IE. I didnt think (stupid I know) to test it in firefox. Recently I did and noticed it did not show the top header, the right menu or did it allow you to scroll down the page. Ive read elsewhere that part of my problem may be due to having this at the top of my page

Code:

<%@LANGUAGE="JAVASCRIPT" CODEPAGE="65001"%>

but if I remove that, then the site looks the same in IE as it does in Firefox.

Here is a link to the index page of my site. I currently have the above line of code in the page so you can see what it is suppose to look like. Please view this in both browsers so you can see what its suppose to look like (IE) and how firefox is displaying it:

http://www.herbal-connection.com/index.htm

Here is a copy of my css:


Code:

table.sale {
	border-collapse: separate;
	background-color: white;
	text-align: center;
	vertical-align: middle;
	width: 30em;
	margin-left:auto;
	margin-right:auto;

}

img
{  border-style: none;
}

 
body  {
	text-align: center;
	color: #FFFFFF;
	background-color: #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 95%;
}
.twoColFixRtHdr #container {
	width: 1043px;
	margin: 0 auto;
	border: thin solid #000000;
	text-align: justify;
	background-color: #FFFFFF;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #000000;
} 
.twoColFixRtHdr #header {
	background-image: url(herbalconnectionlogo1.gif);
	HEIGHT: 82px;
	background-repeat: no-repeat;
	overflow: visible;
	position: fixed;
} 
.twoColFixRtHdr #header h1 {
	FONT-FAMILY: Georgia, "Times New Roman", Times, serif;
	COLOR: #004278;
	font-size: 30px;
	background-color: transparent;
	margin-top: 0em;
	margin-right: 0em;
	margin-bottom: 0em;
	margin-left: 5px;
}
.twoColFixRtHdr #header H2 {
	FONT-FAMILY: Georgia, "Times New Roman", Times, serif;
	COLOR: #006397;
	background:transparent;
	vertical-align: top;
	font-size: 20px;
	margin-top: 0em;
	margin-right: 0em;
	margin-bottom: 0em;
	margin-left: 5px;
}

.twoColFixRtHdr #mainContent {
	background-color: #FFFFFF;
	padding-right: 20px;
	padding-left: 20px;
	position: fixed;
	width: 860px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: medium;
	color: #000000;
} 
.twoColFixRtHdr #mainContent h1 {
	PADDING: 0em;
	FONT-FAMILY: Georgia, "Times New Roman", Times, serif;
	FONT-SIZE: x-large;
	text-align: center;
	COLOR: #004278;
	MARGIN: 1em;
	background-color: #FFFFFF;
}

.twoColFixRtHdr #mainContent h2 {
	PADDING: 0em;
	FONT-FAMILY: Georgia, "Times New Roman", Times, serif;
	FONT-SIZE: large;
	text-align: center;
	COLOR: #004278;
	MARGIN: .1em;
	background-color: #FFFFFF;
}

.twoColFixRtHdr #mainContent h3{
	FONT-FAMILY: Georgia, "Times New Roman", Times, serif;
	COLOR: #004278;
	font-size:medium;
	text-align:center;
	background:transparent;
	margin-top: .5px;
}
.twoColFixRtHdr #mainContent h4{
	FONT-FAMILY: Georgia, "Times New Roman", Times, serif;
	color:#B22222;
	font-size:medium;
	text-align:center;
	background:transparent;
	margin-top: .5px;
}

.twoColFixRtHdr #mainContent a:link {
	color: #B22222;
	font-weight:bold;
	background-color: #FFFFFF;
}

.twoColFixRtHdr #mainContent a:visited {
	color: #B22222;
	background-color: #FFFFFF;
}

.twoColFixRtHdr #mainContent a:hover {
	color: white;
	background: black;
}

.twoColFixRtHdr #mainContent a:active {
	color:#B22222;
	background-color: #FFFFFF;
}
.twoColFixRtHdr #sidebar1 {
	float: right;
	width: 140px;
	background-color: #D7DEE4;
	text-align: center;
	position: fixed;
	background-position: top;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #000000;
}

.fltrt {
	float: right;
	margin-left: 8px;
	width: 0px;
}
.fltlft {
	float: left;
	margin-right: 8px;
	width: 0px;
}
.clearfloat {
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
.center {
	text-align: center;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: medium;
	color: #000000;
	background-color: #FFFFFF;
}
	
.hrule {
	border-bottom-width: 0.04em;
	border-bottom-style: solid;
	border-bottom-color: #000000;
	padding-top: 0em;
	padding-bottom: 1em;
}

I appreciate all input anyone can give, just please dont get to high techy with me as Im still learning. This is my business site and now I see why my sales have declined since probably a lot of people cant see the site properly. Please let me know if you need any other details.

Thanks,
Pamela

Hey gang,

Ok, this is embarrassing, but I'm currently working at redesigning my website (here), and would love to get rid of the craptacular tables-based layout. I've spent the last few days googling for a good two-column header and footer tutorial but I can't see any that works well and explains what is going on ( I'd rather know what's working than cut'n'paste someone's css scheme ). I'm not too worried about <IE5.5/etc compatibility as most of the data on the page is UTF-8 ( and IE5.0 - 5.5 makes up 1.49% of my visitors ).

This is what I have so far - I just need to get rid of those two cells!

Can anyone point me in the right direction (or laugh hard at my crappy google-skills ).

Hello! I am in need of some help with my css. I know, I am a total newbie but need some help with getting the css working properly. It seems that some parts work for IE and other parts work for Firefox. It seems like my left bar shows differently in IE and Firefox. Furthermore I have checked with IE on Mac and the main body doesn't show correctly either. It is displayed too short, doesn't fill the box. If anyone please could take a look at the code and see if they can help me I would appreciate it.

Please anyone help me. You can see the page at:
http://www.galakse.no/test/index.php/tscm/news
The css is located he
http://www.galakse.no/test/design/tscm/stylesheets/tscm.css

Any and all help is very much appreciated!

Thank you!

Hi all,

I need some help. I have implemented a fixed header on my site, but certain content is scrolling above the header while other is scrolling behind. I would like it all to scroll behind the fixed div's.

I'm trying to use CSS to create a layout that has a top header, followed by a left side navbar, a center content area, and a bottom footer. I'm totally lost by the CSS needed to make this happen. Here's what I'm trying. It's borrowed from other posts that came up by searching for headers and footer. Any help would be fantastic. I'm trying to end my use of frames for the header and navbar. Thanks in advance for any help.

Code:

 #header {
        
        left: 0;
        width: 100%;
        height:125px;
        top: 0;
     	background-image: url(images/topbackground2.jpg);
        background-repeat: repeat;

}

#navbar{
		width:122px;
		height:100%;
		background-color:#3f79a1;
		position: absolute;
               top: 125px;
               left: 0px;}

#footer{
           background-image: url(images/gradientsmaller2.gif);
          font: 10pt;
          position: absolute;
          bottom: 0;
          left:0;
          background-color: #ccffcc;
          width: 100%; 
          text-align: center;
          padding: 0 15%;

}

I was looking for ways to make the layout work with header, body and footer that work in IE, Gecko, Safari, etc.. I thought I found a good solution via Google surfing and it looked great. Then I discovered that it doesn't have the "<!DOCTYPE ...>" tag, so I added it and now it is thrown out of wack in most browsers. Does anyone know of a valid css layout that would include the header, the body and the footer that work.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<style type="text/css">
/* colored borders put on for visual effect only */
body{
height: 100%;
margin: 0;
padding: 0;
}

#spacer{
height: 95%;
float: left;
width: 1px;
font-size: 1px; /* to make sure width is not overridden */
padding: 0;
margin: 0;
background-color: red; /* visual effect only */
}

#contentwrap{
width: 100%;
text-align: center;
padding: 0;
margin: 0;
}

#content{
padding: 30px;
border-width: 1px;
border-style: solid;
border-color: blue;
}

#footer{
clear: both;
height: 5%;
border-width: 1px 0 0 0;
border-style: solid;
border-color: red;
vertical-align: middle;
padding: 0;
margin: 0;
}

</style>
</head>

<body>
<div id="spacer"></div>

<div id="contentwrap">

<div id="content">
<p>this is the content div</p>
<p>&nbsp;</p>
<p>more content</p>
<p>&nbsp;</p>
<p>and even more</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div><!-- content -->

</div><!-- contentwrap -->

<div id="footer">footer</div>
</body>

</html>

I thought I can do this but it doesn't really work as the footer doesn't go all the way down to the bottom when needed...

Code:

<div id="header">
 ....
</div>

<div id="main">
 ....
</div>

<div id="footer">
 ....
</div>

Thanks,
FletchSOD

I want to do this design:
http://hermann.sonyextreme.com/upload/design.png
* means it should be "the rest". Just like when working with frames. So the sites height is 100% and width is 800px.

I've set it up like this:
Code:

<div id="container">
  <div id="header">
  </div>
  <div id="main">
    <div id="menu">
    </div>
    <div id="content">
    </div>
  </div>
  <div id="footer">
  </div>
</div>

But no matter what I try, the css just keeps ****ing with me
So do you have any tricks/know any sites who have done this succesfully... or just anything to help me, then I'd love to hear from you

Thanks in advance
Hermann

Hello,
im trying to make Fixed width 3 columns (each column have fixed width) layout 100% height with header and footer.

-Well I see alot of examples around the web, but i dont see complete one and im really tired of searching, i made the Fixed width 3 comlumns layout, left and right are absolute position, and center is relative to the header

-the problem is that all columns dont fill the whole height of the browser windows, the footer doesnot work good. so the whole thing is missed up, so please show 100% working example of what i need.

Thanks in Advanced
Samer

Alrighty, I'm trying to produce a layout similar to that of what is shown in the attached image. Please ignore the image being the rainbox colors, but I had to differentiate sections.

I can get the banner/search line to appear properly, but the rest will not. Left menu gets positioned fine, the content does as well (more or less), but the right column is displaced, and shifted down to the very bottom of the window -- far right, though.

I can't explain much better than that, so without further ado:

CSS:
Code:

.columns-float{
    float : left;
    width : 80%;
}
.column-one
    {
    width : 75%; /* NOTE: This needs to be dynamic! THIS is what I'm
          inquiring about. The above problem assumes this attribute
          is set to "auto". */
    float : right;
    }
.column-two
    {
    width : 25%;
    float : left;
    }
.column-three{
	width : 20%;
	float : right;
}
.box-footer{
	clear : both;
}
.column-one-content{
	margin-left: 1px;
	margin-right: 1px;
}
/*Hack below:*/
.box-wrap, .columns-float, .column-one, .column-two, .column-three, h2{
     p\osition: relative;
}

(Above was borrowed from here, albeit with modifications.)

HTML: Code:

...

<div class="columns-float">

<div class="column-one">
<div class="column-one-content">
<h2>column 1</h2>
<p>column filler</p>
<p>column filler</p>
<p>column filler</p>
<p>column filler</p>
<p>column filler</p>
<p>column filler</p>
<p>column filler</p>

<p>column filler</p>
<p>column filler</p>
<p>column filler</p>
<p>column filler</p>
<p>column filler</p>
<p><a href="#" title="fake link for testing">test link</a></p>
</div>
</div>
<div class="column-two">
<div class="column-two-content">
<h2>column 2</h2>

<p>column filler</p>
<p>column filler</p>
<p>column filler</p>
<p><a href="#" title="fake link for testing">test link</a></p>
</div>
</div>
<div class="box-clear">&nbsp;</div><!-- # needed to make sure column 3 is cleared || but IE5(PC) and OmniWeb don't like it  -->

</div><!-- close boxbody -->
<div class="column-three">
<div class="column-three-content">
<h2>column 3</h2>

<p>column filler</p>
<p>column filler</p>
<p>column filler</p>
<p><a href="#" title="fake link for testing">test link</a></p>
</div>
</div>
<div class="box-clear">&nbsp;</div><!-- # needed to make sure column 3 is cleared || but IE5(PC) and OmniWeb don't like it  -->

<div class="box-footer">Footer
</div>

Do not link me to Position Is Everything. Been there already, and it wasn't helpful; the used terminology was too abstruse for me.

Any help would be appreciated, and I thank you very much for your time. This is driving me batty.