Forum Moderators: not2easy
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
float:bottom
cEM
cheers, for your help,
steven.
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>
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.
