homepage Welcome to WebmasterWorld Guest from 54.237.54.83
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Align object to bottom of page
steven_s




msg:1201746
 10:52 am on Aug 26, 2005 (gmt 0)

Help. I have a a simple 2 column page layout, sidenav on the left and content on the right. I have navigation at the top of the sidenav column.

What i would like to do is add content to the bottom of the left column, and image or flash, that lines up to the end of the content on the right. Because some pages have flash i can't use a background image on the main container div.

I currently have it working with a class setting a negative margin to the image but i wondered if there was a better more structured way.

cheers,
steven

 

skizm




msg:1201747
 2:15 pm on Aug 27, 2005 (gmt 0)

I'm not exactly sure of your question, but I think you're in need of some float:bottom right fu. Or it might be as simple as a valign="bottom" align="right" in a div that encapsulates your image. As long as its located properly in the page flow it should do fine. Hope this helps...

createErrorMsg




msg:1201748
 3:21 pm on Aug 27, 2005 (gmt 0)

steven, how have you set up your two columns? The code you've used to get the two columns side by side (absolute positioning or floating), will determine the right approach to use.

float:bottom

Sadly, there is no such thing [w3.org].

cEM

steven_s




msg:1201749
 7:47 am on Aug 30, 2005 (gmt 0)

createErrorMsg - I'm using floats for the 2 columns. Both sit inside a container div, so i guess the image would sit at the bottom of that.

cheers, for your help,
steven.

createErrorMsg




msg:1201750
 10:59 am on Aug 30, 2005 (gmt 0)

add content to the bottom of the left column, and image or flash, that lines up to the end of the content on the right

I may be misunderstanding you still. If you mean that you want the image to appear beneath BOTH columns, it's a simple matter of adding it to the source after the closing tag of the second column, and styling the image/flash with clear:both.

But the above quote seems to be saying that you want content in the left column, content in the right column that may be longer, and then in the left column, but below the level at which the right column content sits, the image or flash. I.E., a gap between the text in the left column and the image at the bottom of that column.

IF this is what you're after, you may have to change your source code from two floats to one. If you float the right column first, then leave the left column unfloated but give it a right margin to keep it's text out from under the right column, you can then place the image or flash at the end of the left column and style it to clear:right. This will ensure that it stays below the right column column content at all times.

Here's a test page demonstrating the above. Note that the container div is floated. Doing so not only allows it to enclose the float and wrap it's borders around both divs, but also creates a new formatting context [w3.org], which in turn confines the effect of the clear property [w3.org] being used to within the container div. If there are other floated elements elsewhere on the page, the clear property won't effect them.

cEM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style>
*{
margin:0;
padding:0;
}
#container{
float:left;
width:800px;
border:2px solid #f60;
}
#left{
margin-right:50%;
background:#369;
}
#right{
float:right;
width:50%;
}
#fake_flash{
clear:right;
border:2px solid #000;
background:#fff;
width:300px;
height:300px;
}
</style>
</head>
<body>
<div id="container">
<div id="right">
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div id="left">
<p>Lorem ipsum dolor sit amet.</p>
<div id="fake_flash"></div>
</div>
</div>
</body>
</html>

steven_s




msg:1201751
 11:58 am on Aug 30, 2005 (gmt 0)

guess i'm not explaining myself very well.

I need the bottom of the jpg/swf in the left column to line up with the last line of copy on the right-hand side.

cheers,
steven.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved