Solved

tricky!-  negative margins question

Posted on 2009-04-09
11
385 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
  • 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 42

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
 

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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

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 500 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 42

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 42

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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
This article discusses how to create an extensible mechanism for linked drop downs.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

758 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now