PDA

View Full Version : Align IMG with bot of liquid container



nockemout
Mar 8th, 2010, 08:09 AM
Link: whataboutustv.com

Trying to get liberty.png to align to the bottom of #sidebar .. Having trouble maybe due to the hack i've used to attain equal length columns.. Can anyone help?

abduraooft
Mar 8th, 2010, 08:43 AM
Try
#page {/*whataboutustv.com (line 14)*/
background:transparent url(http://whataboutustv.com/wp-content/themes/wau/images/kubrickbg-ltr.jpg) repeat-y scroll center top;
border:medium none;
position:relative;
}
#sidebar {/*whataboutustv.com (line 586)*/
background-image:url(http://whataboutustv.com/wp-content/themes/wau/img/sidebarBg.png);
margin-bottom:-32767px;
margin-left:495px;
/*overflow:hidden;
padding:0 0 32767px;*/
width:213px;
}


<img src="http://www.whataboutustv.com/wp-content/themes/wau/img/liberty.png" id="liberty"/>

#liberty {
bottom:0;
position:absolute;
right:0;
} and you'd see the image aligned at the bottom of the div#page.

Absolute position will be handy for you in this case. Before that, I'd recommend you to change your layout like http://bonrouge.com/2c-hf-fluid(r).php (you may set a fixed width on #wrap), which uses the faux column technique (http://www.alistapart.com/articles/fauxcolumns/) to display stretched columns.

nockemout
Mar 9th, 2010, 05:18 AM
Ok. I will use the faux column method. Seems much easier, thanks

nockemout
Mar 9th, 2010, 06:52 AM
Link: www.whataboutustv.com

COnverted to faux columns, still haven't been able to get that statue of liberty to align with the bottom of #content

Please advise

abduraooft
Mar 9th, 2010, 07:13 AM
COnverted to faux columns, still haven't been able to get that statue of liberty to align with the bottom of #content None of your wrapper divs are extending to 100% and thus, if you remove the text, you won't get your footer at the bottom. If you follow the layout in the link in my above post, you'll get a better output without any absolute position applied to sidebar.

Anyway, try

html, body, * html #page {
height:100%;
}
#page{
min-height:100%;
position:relative;
}
#liberty{
bottom:57px;
position:absolute;
right:0;
}

nockemout
Mar 9th, 2010, 09:30 PM
Still didn't work. I've decided to go another route instead. I'll keep this in mind though for the next time I try something like this. Thanks.