Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

tricky!-  negative margins question

Posted on 2009-04-09
11
Medium Priority
?
391 Views
Last Modified: 2012-08-13
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

0
Comment
Question by:phillystyle123
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
  • 3
11 Comments
 
LVL 13

Expert Comment

by:myderrick
ID: 24112736
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
 

Author Comment

by:phillystyle123
ID: 24112971
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
 
LVL 43

Expert Comment

by:David S.
ID: 24113501
I suggest you give ".rightColumnsAllWide2Col" position:relative to create a new positioning context and then absolutely position ".rightColumnsAllWide2Col .img_caption".
0
Survive A High-Traffic Event with Percona

Your application or website rely on your database to deliver information about products and services to your customers. You can’t afford to have your database lose performance, lose availability or become unresponsive – even for just a few minutes.

 

Author Comment

by:phillystyle123
ID: 24117859
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
 
LVL 13

Expert Comment

by:myderrick
ID: 24120431
Ok for such situations you need to add * {margin:0; padding:0} to your css.

Hope that works for you.

MD
0
 

Author Comment

by:phillystyle123
ID: 24120515
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
 
LVL 13

Accepted Solution

by:
myderrick earned 2000 total points
ID: 24120594
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
 
LVL 43

Expert Comment

by:David S.
ID: 24120676
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
 
LVL 13

Expert Comment

by:myderrick
ID: 24120712
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
 
LVL 43

Expert Comment

by:David S.
ID: 24120818
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
 

Author Closing Comment

by:phillystyle123
ID: 31568751
Thank you!
0

Featured Post

Video: Liquid Web Managed WordPress Comparisons

If you run run a WordPress, you understand the potential headaches you may face when updating your plugins and themes. Do you choose to update on the fly and risk taking down your site; or do you set up a staging, keep it in sync with your live site and use that to test updates?

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn how to dynamically set the form action using jQuery.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

730 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question