[Solved]Top AND Bottom Align text

Simplest way would be to ensure that the parent div had a positional context (relative) then make the link display:block and position it absolute; bottom:0; where it will stick.

You do not need to place it in a div, that will lead to divitis but you may consider that the link be expressed in a semantic context such as a <p> element although not absolutely required.

Hugo,
I almost hate having to ask.

But as they say in the classics - "There's no such thing as a stupid question"

But I really have no idea what the heck you're talking about!

I don't even know how to start, in an attempt to try and do it for myself; as I just don't have an understanding of CSS terms.

Sorry,

If you place a positioning property on - for the sake of argument - #sidebar i.e position:relative then you are able to use position:absolute on say an anchor and position it using the offset properties in this instance left:0; bottom:0; this will place the anchor to the bottom of #sidebar where it will stay.

Position absolute takes it's reference position from the nearest positioned ancestor (parent element that it's nested in or if not parent then on up the tree until it finds a positioned element (ancestor), this defaults to the body element which is always positioned.

I suggested that you make the anchor display:block as this allows you to format it as block level using width, height, margins etc and you could have it span the full width of it's parent and also to clickable on all of the area including whitespace not just the text (requires dimensions or a haslayout trigger for IE, which would be provided for by width, but while avoiding padding margins on the horizontal axis)

You are going to kick yopurself when you see the answer.

Make another footer row above the other rows in the footer with a fixed height (like the other rows). Give it a right margin sufficient (611px?) to not go over the middle content at all (ie it is only as wide as the left bit. Alter the clearfooterleft to be that much higher. In the fullheightcontier css, alter the negative margin-bottom by this amount too.

Done deal.

Or you can place the element absolute to the bottom of the left sidebar and avoid all the extra markup

The left sidebar is actually fake! Honest guv.

A big thanks to both of you...

I realise that there are MANY ways to accomplish the desired results.
Regardless of how difficult it might be (for me to learn / appreciate / understand)

Is either of your two methods a "better practice" than the other?
Or is it simply a case getting it to wkr - is good enough?

My suspicion is that if you placed a div abs pos at the bottom of the left column it would sit just under the last bit of content in there, whereas what you want is for it to sit on top? Experimentation is fun

Sadly if the sidebar is 'fake' (height dictated by it's content and that falls short of the full viewport height) then the absolute positioning will not work in the intended fashion because the actual real bottom of the sidebar/column is just below the last bit of actual content.

I tend to manage to work in an equal height column technique if I have to do full height layouts so can use this technique if required.

Hugo.

Ahh, the penny has dropped.

Strike up another one for the learning of CSS.
i think I';ve understood it better by you two guys discussing it than I did by any of your own posts

I sincerey appreciate the ongoing support....

Have you tried it and did it work?

and somehow a spide has gotten on to your server and left a web

Hi Trevor..

http://www.gm.rmit.edu.au/dev/css_tryout/LSB_2col.htm

Is the current version.
(I have coloured the new footer purple for illustrative purposes only.)

In FF2 and IE7 the screen is perfect. - great work!
I don't have IE6 here at home - so haven't checked it with that yet.

Something I did notice though for FF and IE7 - is that after having added in extra text into the main content(so the web page is longer than my screen), the background image does in fact stay fixed in position!

Another big thumbs up!

Looks OK in IE6 too.

Once again, just i case you end up on this thread for looking for answers, please find the relevant code below;

CSS;
/*** Style for LSB 2 Column Template ***/
html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr{
margin:0px;
padding:0px;
border:0px;
border-collapse:separate;
border-spacing:0px;
}
html,body{height:100%}
body{
font-family: verdana, arial, helvetica, sans-serif;
font-size:100.1%; /*** Don't change this setting. Make all other
font-sizes in % (preferred) or ems ***/
color:#000000;
background:#CCCCCC; /*** Background colour of page ***/
min-width:820px; /*** Content Width ***/
text-align:center;
}
input,select{
margin:0px;
padding:0px;
}
strong,b{
font-weight:bold;
}
p{
font-size:90%;
line-height:1.1em;
}
.floatcontainer:after{content:".";display:block;height:0px;clear:both;visibility:hidden;font-size:0px}
.floatcontainer{display: inline-block;}
/* Hides from IE Mac \*/
* html .floatcontainer {height:1%}
.floatcontainer{display:block}
/* End Hack */
#fullheightcontainer{
margin-left:auto;
margin-right:auto;
text-align:left;
position:relative;
width:870px; /*** Content Width ***/
display:table;
height:100%;
margin-bottom:-120px; /*** NEGATIVE TOTAL Height of Footer Rows(inc 20px for new footer ***/
background:#D96C00 url(ll.gif) left top repeat-y; /*** Background colour of left column. Also has the left hand side shady border image ***/
}
#wrapper{
display:table-cell;
position:relative;
border-left:9px transparent solid; /*** Moves the content over to reveal the shady border (same width as that). NOT used by IE ***/
background:url(lr.gif) right top repeat-y; /*** Background colour of left AND right columns. Also has the right hand side shady border image ***/
}
* html #wrapper{ /*** for IE to reveal the content over to reveal the shady border (same width as that). ***/
border:none;
margin-left:9px;
}
#outer{
position:relative;
margin-left:200px; /*** Left Column Width ***/
width:652px; /*** Center Column Width (takes into account left shady border width) ***/
background:#FFFFFF; /*** Background colour of center column. ***/
height:100%;
background-image: url(images/Web.gif);
background-attachment : fixed;
background-repeat: no-repeat;
background-position: top;
}
#float-wrap{
width:652px; /*** Center Column Width (takes into account left and right shady border widths) ***/
float:left;
display:inline;
}
#center{
position:relative; /* fix for IE */
width:652px; /*** Center Column Width (takes into account left and right shady border widths) ***/
float:right;
height:100%;
display:table;
}
#left{
float:left;
display:inline;
width:200px; /*** Left Column Width ***/
margin-left:-200px; /*** NEGATIVE Left Column Width ***/
position:relative;
}
#clearheadercenter{
height:145px; /*** TOTAL Height of Header Rows ***/
overflow:hidden;
}
#clearheaderleft{
height:145px; /*** TOTAL Height of Header Rows ***/
overflow:hidden;
}
#clearfootercenter{
height:100px; /*** TOTAL Height of Footer Rows ***/
overflow:hidden;
}
#clearfooterleft{
height:120px; /*** TOTAL Height of Footer Rows ***/
overflow:hidden;
}
#footer{
z-index:1;
position:relative;
width:100%;
height:0px;
}
#footer-inner{
width:870px; /*** Content Width ***/
margin-left:auto;
margin-right:auto;
height:0px;
}
#anotherfooterrow{
margin:0px 9px;
margin-right:661px;
background:#ff00ff;
text-align:left;
height:20px;
overflow:hidden;
}

#subfooter1{
margin:0px 9px;
background:#444444;
text-align:center;
height:82px;
overflow:hidden;
}
#header{
z-index:1;
position:absolute;
top:0px;
left:0px;
width:100%;
height:0px;
}
#header-inner{
width:870px; /*** Content Width ***/
margin-left:auto;
margin-right:auto;
height:0px;
}
#subheader1{
margin:0px 9px;
background:#D96C00;
text-align:center;
height:25px;
overflow:hidden;
}
#subheader2{
margin:0px 9px;
background:#FFFFFF;
text-align:left;
height:100px;
overflow:hidden;
}
#container-left{}
#container-center{}
#centerfill{display:none}
#shadybottom,#shadytop{
margin:0px;
height:18px;
overflow:hidden;
background:url(lbl.gif) left top no-repeat;
}
#shadytop{background:url(ltl.gif) left top no-repeat}
#shadybottom div{background:url(lbr.gif) right top no-repeat}
#shadytop div{background:url(ltr.gif) right top no-repeat}
#shadybottom div div,#shadytop div div{
margin:0px 18px;
background:#444444 url(lb.gif) 0 9px repeat-x;
height:18px;
overflow:hidden;
}
#shadytop div div{background:#D96C00 url(lt.gif) left top repeat-x}

.color-bar{
height:2px;
margin:0 9px;
background:#DDDDDD;
overflow:hidden
}

ie7css;
#fullheightcontainer{height:auto;min-height:100%}
#centerfill{
display:block;
position:absolute;
top:0px;
width:661px;
height:100%;
background:#FFFFFF url(lr.gif) right top repeat-y;
margin-left:209px;
}

HTML;

Your Page Title Here
@import url("style.css");

@import url("ie7style.css");

A big thanks to everyone who helped out!