Welcome to WebmasterWorld Guest from 54.224.17.208

Forum Moderators: not2easy

Message Too Old, No Replies

Align object to bottom of page

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

5+ Year Member



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

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

5+ Year Member



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...
3:21 pm on Aug 27, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

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

5+ Year Member



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.

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

WebmasterWorld Senior Member 10+ Year Member



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>
11:58 am on Aug 30, 2005 (gmt 0)

5+ Year Member



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.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month