Two Column Layout & Footer

Forum Moderators: not2easy

Message Too Old, No Replies

Two Column Layout & Footer

Make footer stay below longest column.

woop01

5:19 am on Jan 3, 2005 (gmt 0)

We have a new CSS layout with a header, two middle columns (links and content), and a bottom footer.

When the two middle columns don’t have any “position: absolute;” tags the footer stays below the longest column regardless of whether it is the right or left column. However, when either the left or the right column has a “position: absolute;” tag, the footer ignores the length of that column and aligns itself with the bottom of the other column. If I place a “position: absolute;” tag in both of the middle columns, the footer aligns itself with the bottom of the header.

We have to use a “position: absolute;” tag in the content column because of browser resolution issues.

What is causing this? Is there a solution to this problem? What other info do you need if this isn’t enough.

Thank you,

supermanjnk

1:19 pm on Jan 3, 2005 (gmt 0)

you could try using floats instead, it would really be helpful also if we could see your code.

woop01

3:24 pm on Jan 3, 2005 (gmt 0)

Yeah, I know it would be much easier to do with the source code. I just couldn't figure out how to do that without violating the TOS.

stever

3:28 pm on Jan 3, 2005 (gmt 0)

>>>We have to use a “position: absolute;” tag in the content column because of browser resolution issues.

Could you explain your reasoning for this a little more? (As it seems that this is what is causing the problem).

woop01

3:38 pm on Jan 3, 2005 (gmt 0)

When we don't use "position: absolute;" the content section 'squeezes' down below anything in the link section in smaller resolutions leaving a big white space before any content.

woop01

3:39 pm on Jan 3, 2005 (gmt 0)

Here's the code (I think I took all identifying remaks out)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>MYSITE</title>

</div>

LINKS GO HERE

<div class="column-in" style="position:absolute; left:210px; top:270px; z-index:50; align:right;">
<div class="textRight11">
CONTENT GOES HERE
</div>
</div>

</div>

</div>

woop01

3:39 pm on Jan 3, 2005 (gmt 0)

And the style.css sheet...

@import "texts.css";

body {
margin:0; padding:0;
min-width: 750px;

}

#header {
margin:0; padding:0;
height:258px;
background:white;
}

#footer {
margin:0;
padding:0;
background:#003000;
height:20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #FFFFFF;
}

#main1 {
margin:0; padding:0;
background:white url(../images/bg_left.jpg) top left repeat-y;
}
#main2 {
margin:199; padding:0;
/*background:url(../images/bg_right02.jpg) top right repeat-y;*/
}

#left {
float:left;
width:199px;
margin:0;
padding:0;
/*background:url(../images/bg_left.jpg) top right no-repeat;*/
}
#leftPadding { padding-left:15px;}

/*
#right {
float:right;
width:170px;
margin:0;
padding:0;
}
#right_content {
background:url(../images/triangle.jpg) top left no-repeat;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #003000;
text-decoration: none;
padding-left:15px;
}

#right_up {
background:url(../images/bg_right01.jpg) top right repeat-y;
padding-left:15px;
padding-top:10px;
padding-bottom:10px;
}
#right_up_title {
height:28px;
background:url(../images/bg_right_title.jpg) top right repeat-y;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
}

#middle {
margin:0 0px;
padding-left:210px;
/*background:white*/
}

.column-in {
margin:0; padding:0.5em 1em;
}
.cleaner {
clear:both;
height:1px;
font-size:1px;
border:none;
margin:0; padding:0;
background:transparent;
}

.li {
list-style-type: none;
list-style-image: url(../images/circle1.jpg);
}

stever

3:45 pm on Jan 3, 2005 (gmt 0)

>>>>>When we don't use "position: absolute;" the content section 'squeezes' down below anything in the link section in smaller resolutions leaving a big white space before any content.

Have you considered using a min-width property for a container?

woop01

3:57 pm on Jan 3, 2005 (gmt 0)

We've tried but either haven't done it right or it doesn't work.

stever

4:14 pm on Jan 3, 2005 (gmt 0)

On a similar layout, the min-width is on the body (as you do); a width on the container (same value as min-width); and two floats inside the container (where two widths added together do not exceed container width - remember box-model!). Footer clears both content divs.

The only vague problem with the layout is some back-ground image issues on the menu in Firefox, which are not major and which I haven't yet bothered to go too deeply into.

woop01

3:55 am on Jan 4, 2005 (gmt 0)

We've tried the min-width tag as well with negative results.

stever

4:37 am on Jan 4, 2005 (gmt 0)

OK, last try!

Since you've got essentially a two-column flexible layout with header and footer why don't you find a css reservoir (like bluerobot) where the css does what you want?

Dump all your current interior divs and content out of the design, make it work with minimum widths and then slowly add your content back in, checking along the way to make sure padding or widths don't break it...

bedlam

6:08 am on Jan 4, 2005 (gmt 0)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

I'm surprised no one has mentioned this - it might have something to do with your issue (although I'm pretty sure it's not the main problem):

Putting ANYTHING before the doctype, will cause IE to render the document in quirks mode [google.ca] - which will probably cause your page to look quite different from what you had intended.

It's ok to put in your .asp code there, as long as it doesn't output anything in that place. You might just want to do this instead:


<%
'<!-- #BeginEditable "aspcode" --><!-- #EndEditable -->
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

...though I'm not sure it will work for whatever you're doing in that spot...

-B

woop01

7:37 pm on Jan 4, 2005 (gmt 0)

stever, thanks, we'll try that.

belam, we never output information in the top coding section. It's just there to have a standard spot to put queries and such.

woop01

8:29 pm on Jan 4, 2005 (gmt 0)

We've also come to realize the page works just fine in Firefox but not IE.

Go figure.

createErrorMsg

3:43 am on Jan 5, 2005 (gmt 0)

belam, we never output information in the top coding section. It's just there to have a standard spot to put queries and such.

bedlam is right on this one. ANYTHING before the doctype throws IE into Quirks mode, including that whitespace/carriage return between the template tags and the doctype.

cEM