help making an accessible layout

**GluteHam** · Jul 16 '07, 03:33 PM

That's exactly what I forgot to do; however, it didn't solve the problem. The footer was aligned left and behind the container div ... even centering it and giving it a zindex to bring it forward ... the container div extended below it. (and z-index didn't bring it forward)

Here's my most updated code:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitl ed Document</title>
<link href="styles3.c ss" rel="stylesheet " type="text/css" />
</head>

<body>

<div id="container" >

<div id="midcol">fir st in html first in html first in html first in html first in html first in html first in html first in html first in html first in html </div>

<div id="leftcol">se cond in html second in html second in html second in html second in html second in html second in html second in html second in html second in html </div>

<div id="rightcol">t hird in html third in html third in html third in html third in html third in html third in html third in html third in html third in html third in html </div>

</div>

<div id="footer">fou rth in html</div>

<div id="header">
<div id="croheader"> fifth in html</div>
</div>

</body>
</html>

CSS

/* CSS Document */

html, body {
margin: auto;
height: 100%;
}

body {
position: relative;
}

#container {
position: relative;
top: 50px;
width: 920px;
margin: 0 auto;
background: #CCFFFF;
height: 100%;
}

#container #leftcol {
float: left;
width: 200px;
top: 0;
background: #CC0000;
height: 100%;
}

#container #midcol {
position: absolute;
left: 200px;
width: 585px;
background: #0099FF;
height: 100%;
}

#container #rightcol {
float: right;
width: 135px;
background: #99FF99;
height: 100%;
}

#footer {
width: 920px;
background: #CCCCCC;
margin: auto;
z-index: 1;
}

#header {
position: absolute;
top: 0;
width: 100%;
height: 50px;
background: #FFCC66;
}

#header #croheader {
width: 920px;
height: 50px;
background: #CCC;
margin: 0 auto;
}

**drhowarddrfine** · Jul 16 '07, 03:50 PM

Sorry, my mistake. Leave the footer inside that div. It should work.

**GluteHam** · Jul 16 '07, 05:49 PM

Nope :-( Footer is now hidden:

http://granthansen.com/test/positioning2.ht ml

**drhowarddrfine** · Jul 16 '07, 06:44 PM

Obviously, I'm mis-copying something somewhere so here is the markup right off the screen:
[html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html xmlns="http://www.w3.org/1999/xhtml"><head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitle d Document</title>

<link href="./positioning2_fi les/styles2.css" rel="stylesheet " type="text/css" /></head><body>

<div id="container" >

<div id="midcol">fir st in html first in html
first in html first in html first in html first in html first in html
first in html first in html first in html </div>

<div id="leftcol">se cond
in html second in html second in html second in html second in html
second in html second in html second in html second in html second in
html </div>

<div id="rightcol">t hird in html third in html third in
html third in html third in html third in html third in html third in
html third in html third in html third in html </div>

<div id="footer">fou rth in html</div>

</div>

<div id="header">
<div id="croheader"> fifth in html</div>
</div>

</body></html>[/html]
[CODE=css]html, body {

margin: auto;

height: 100%;

}

body{

position:relati ve;

}

#container {

position: relative;

top:50px;

width: 920px;

margin: 0 auto;

background: #CCFFFF;

height: 100%;

}

#container #leftcol {

float:left;

width: 200px;

background: #CC0000;

height:100%;

}

#container #midcol {

position:absolu te;

left:200px;

width: 585px;

background: #0099FF;

height: 100%;

}

#container #rightcol {

float:right;

width: 135px;

background: #99FF99;

height: 100%;

}

#container #footer {

float:left;

width: 920px;

background: #CCCCCC;

}

#header {

position:absolu te;

top:0;

width: 100%;

height: 50px;

background: #FFCC66;

}

#header #croheader {

width: 920px;

height: 50px;

background: #CCC;

margin: 0 auto;

}[/CODE]

**GluteHam** · Jul 16 '07, 07:28 PM

I appreciate your patience and willingness to help. I can't thank you enough. I created new files using the HTML and CSS code you posted and I'm still having the same issue. Do you see it working properly here?

http://granthansen.com/test/positioning.htm l

I deleted the old files to avoid any cache issues. All looks just about perfect except for the footer being below the browser screen.

**drhowarddrfine** · Jul 16 '07, 07:52 PM

except for the footer being below the browser screen.

And there is the issue. I didn't know you wanted the footer to be above "the fold". This can be done but I need to look up my notes cause I never remember how to do it exactly.

**GluteHam** · Jul 16 '07, 07:58 PM

Ah yes ... it's what I've spent hours today trying to figure out, lol. You know, I think it'll be very rare that a page won't be longer than the fold ... but never say never! If it's not a hassle to dig up the notes, I'd be interested to know the solution ... I think this layout worthy of submitting to the community since it really does offer an accessible three-column with header and footer layout, which is pretty common.

**GluteHam** · Jul 16 '07, 08:02 PM

Ug, you know what? The footer is completely missing in Safari. Darn!

**drhowarddrfine** · Jul 16 '07, 08:07 PM

Sticking the footer to the bottom isn't hard, I do it all the time, just can never remember one little detail. There are lots of 3-column layouts on the web.

**GluteHam** · Jul 16 '07, 08:10 PM

OK ... in my search I couldn't find any examples that positioned the HTML like I did.

**GluteHam** · Jul 17 '07, 01:15 PM

Just an update ... been playing around with min-heights, margins, etc. Nothing seems to work. It seems that the container div's top position of 50px (even when changed to margin or even padding) pushes everything down.

I found some articles on positioning footers, but the top position I have makes their solutions not work.

**GluteHam** · Jul 17 '07, 02:13 PM

Oh so close:

http://granthansen.com/test/positioning.htm l

The footer travels vertically with the height of the container ... but ... once I start populating it with content, all goes wild with scroll bars. And I can't get all three columns to be 100% of the container.

**drhowarddrfine** · Jul 17 '07, 02:43 PM

Sorry, I've been getting overloaded today. Too much goofing off yesterday.
Here is an old page with a fixed footer that I was looking for. If you study it, you might be able to figure out how to make it work in your page.
[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">

* {margin:0;paddi ng:0}
html,body{heigh t:100%}
html{width:100% ;}
body{width:auto ;background-color:#dfd}

#outer{min-height:100%;
margin-bottom:-1.5em;
height:auto;}

* html #outer{height:1 00%}

#footer{width:1 00%;clear:both; height:1.5em;ba ckground-color:#efe;}

#logo_header{ba ckground-image:url("subw ay_logo.gif");b ackground-repeat: no-repeat;
background-color:green; height:55px;pad ding-top:0px}

#top_nav {position:relat ive;height:1.5e m;min-width:771px;bac kground-color:gray;colo r:yellow;line-height:1.5em}
#top_nav p{float:left;pa dding-left:1.5em;}
#top_nav ul{float:right; list-style-type:none;}
#top_nav li{float:left;p adding:0 1.5em}

#page_content{b ackground-color:#dfd;}
#page_content ul{float:right; list-style-type:none;}

.img_holder{flo at:left;backgro und-color:#00e;heig ht:300px;width: 350px;margin-top:10%}

</style>
</head>
<body>

<div id="outer">
<div id="logo_header "></div>

<div id="top_nav">
<p>in St. Louis, Missouri</p>

<ul>
<li><a href="specialac counts">Corpora tions/Schools</a></li>
<li><a href="personala ccounts">Your Account</a></li>
</ul>

</div>

<div id="page_conten t">
<div class="img_hold er"> </div>
<ul>
<li><a href="ordering. html">Order Online</a></li>
<li><a href="menus.htm l">See The Menu</a></li>
<li><a href="maps.html ">See A Map</a></li>
<li><a href="contacts. html">Contact Us</a></li>
</ul>
</div>
</div>

<div id="footer">
1 Main Road - St. Louis, Missouri - 314-621-0000
</div>

</body>
</html>[/HTML]
Some related links.

**GluteHam** · Jul 17 '07, 02:45 PM

thanks! I'll give it a whirl.

**GluteHam** · Jul 17 '07, 03:54 PM

Well, I think I need to step away from this a little while and get some lunch ... I've tried just about every variation and that top position for the container continues to wreak havoc for me ... fun stuff!

help making an accessible layout

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment