tricky!- negative margins question

I'm using Joomla 1.5. I'm trying to create a 2 column layout for an article WITHOUT having the CMS user have to assign all sorts of tricky styles or build a table inside the fckeditor. I'm basically dealing with 2 database fields here:

1. title
2. article text

I want to simulate a 2 column layout using negative margins. The reason I need to do this is that the CMS user is inserting the graphic into the "article text" field along with the rest of the article text.( there is not a seperate field that the graphic can be inserted into without making it too confusing for the CMS user).

The title is above the text so I'm using negative top and left margins to move the graphic and it's caption up and to the left.

The issue I'm having is that if the title is more than 1 line the graphic and caption box is getting moved down - relative to the title.

MY QUESTION: is there a style attribute that i'm not aware of or some other css approach that will keep the graphic/caption box where it is irregardless of how many lines the title is??

The relevant code is in the code snippet box.

2 web page examples:
1. http://collectors.cjehost.com/1line_title.php (aligned corrrectly)
2. http://collectors.cjehost.com/2line_title.php (being pushed down by the title)

htaccess:
cm
!ColSchnek1@!

here's the css i'm using:

.rightColumnsAllWide2Col{
float:right;
width:480px;
margin-top:1.25em;
padding-left:10px;
background:#CCCCCC;
}
.rightColumnsAllWide2Col      .img_caption{border:1px solid #666; padding:5px 10px 0 7px; background:#ddd8ab; margin:-53px 10px 5px -190px;}
.img_caption.right {
float: right;
margin-left: 1em;
}


<div class="rightColumnsAllWide2Col">
 
							<h3 class="color1">
					Donating Art Is a Wise Move				</h3>
			<!---<h4 class="color1"></h4>-->
					<p>
									</p>
						<div class="authorTag">
 
			by Philip T. Temple, LL.B, and Laurence C. Zale		</div>
				
		
 
 
<p class="buttonheading">
	</p>
 
<p><div style="float: left; width: 151px;" class="img_caption left"><img alt="" class="caption" title="Many collectors feel an emotional involvement with their artworks, while others view them as disposable assets." src="http://collectors.cjehost.com/images/user_images/articles_3.jpg" width="151" align="left" height="142"><p>Many collectors feel an emotional involvement with their artworks, while others view them as disposable assets.</p></div>Many collectors feel an emotional involvement with their artworks, while others view them as disposable assets. The wisest approach is to regard them through</p>

Open in new window

phillystyle123Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

myderrickCommented:
Try putting
<div class="img_caption left" style="float: left; width: 151px;">
<img class="caption" height="142" border="0" align="left" width="151" alt="" title="Gifts of tangible personal property present complex philanthropic issues such as valuation and tax." src="http://collectors.cjehost.com/images/user_images/articles_1.jpg"/>
<p>Gifts of tangible personal property present complex philanthropic issues such as valuation and tax.</p>
</div>

Before the <div class="rightColumnsAllWide2Col">

In effect the caption should come first in the html before you start the article column.

Because the rightcolumnsAllWide...is floated right and contains the article. It wwas not closed before the caption div was started.

MD

MD
0
phillystyle123Author Commented:
thanks for working on this myderrick - your idea works when everything is hard coded - as in the 2 sample pages i put up.  however, the reason the rightcolumnsAllWide..div isn't closed before the caption div is started is because the photo/caption and the article text are all being pulled from one db field - like this:

<div class=rightColumnsWide2Col">
<?php echo $article_text; //this contains the artcle text and the graphic?>
</div>
0
David S.Commented:
I suggest you give ".rightColumnsAllWide2Col" position:relative to create a new positioning context and then absolutely position ".rightColumnsAllWide2Col .img_caption".
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

phillystyle123Author Commented:
Kravimir - this is getting somewhere- the positioning between to 2 styles totally works great - thanks! the only issue now is that the top margins are different in IE7 and FF - please take a look:

http://collectors.cjehost.com/1line_title.php
0
myderrickCommented:
Ok for such situations you need to add * {margin:0; padding:0} to your css.

Hope that works for you.

MD
0
phillystyle123Author Commented:
myderrick - i'm already using margin:
and padding:0 isn't working -here's my style:

.rightColumnsAllWide2Col{
position:relative;
left:180px;
top:20px;
width:480px;
margin-top:10px;
padding-left:0 0 0 10px;
background:#CCCCCC;
}
http://collectors.cjehost.com/1line_title.php

htaccess:
cm
!ColSchnek1@!
0
myderrickCommented:
header:

Remove float from the header:
.header1 {t
background:#304052 none repeat scroll 0 0;
margin:0;
padding:5px 0;
width:100%;
}


Remove the top from this css:

.rightColumnsAllWide2Col {
background:#CCCCCC none repeat scroll 0 0;
left:180px;
margin-top:10px;
position:relative;
width:480px;
}

Image caption:

Take away the top: 60px;

Now test it.

MD
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
David S.Commented:
Why did you remove the float declaration from ".rightColumnsAllWide2Col"?

Anyway, IE7 is acting like ".rightColumnsAllWide2Col" is floated even though it isn't, which makes it get pushed down further than in other browsers. One solution is to not float ".header1" as myderrick suggested. Another would be to remove the top margin from ".rightColumnsAllWide2Col" and give it clear:both and then add a bottom margin to ".header1".
0
myderrickCommented:
Removed the float because there was a left:180px making space for the caption which floated (inline)left. Also the rightColumnsAllWide2Col affects(is parent to) the caption due to the arrangement of the HTML

There could have been a better way the html could have been arranged.

We have to work around it this time.

MD
0
David S.Commented:
That question was directed at phillystyle123. The left:180px was added when the float:right was removed. I'm curious as to why.

> There could have been a better way the html could have been arranged.

Yeah.
0
phillystyle123Author Commented:
Thank you!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.