[SOLVED] 2 Column Div Problems

[mtylerb]

Hi (again),

 

I'm trying to make my "Breadcrumb" section in my site display like this:

 

Home -> Archive -> Article                                            RSS Feed

 

Instead, it keeps showing up like:

 

Home -> Archive -> Article

                                                                                                  RSS Feed

 

My div's look like:

 

<div class="path">
	<div class="breadcrumb">
<a href="http://www.tbeckett.net/" title="Home Page">Home Page</a> <span class="breadcrumb-separator">-></span> 
<a href="http://www.tbeckett.net/articles.xhtml" title="Articles">Articles</a> <span class="breadcrumb-separator">-></span> 

<a href="http://www.tbeckett.net/articles/politics.xhtml" title="Politics">Politics</a> <span class="breadcrumb-separator">-></span> 
<span class="breadcrumb-current">Political Leaning</span></div>
</div> <!-- end #path-->
<div class="path" style="text-align: right;">
	<a href="http://www.tbeckett.net/rss"><img src="http://www.tbeckett.net/public/stylesheets/img_dirtylicious/rss.png" alt="rss" style="border: 0px;" /> RSS Feed</a>
</div>

 

I realize div's tend to put a line break after each, but is there a way to override that?  Is there another solution?  The Breadcrumb is hard coded as part of the CMS and so I cannot, easily, change the div class breadcrumb.  So how can I align the RSS link to be on the same line?

 

The site with that exact code is at:  http://www.tbeckett.net/articles/politics/2008/11/09/political-leaning.xhtml

 

Any help is greatly appreciated!

[mtylerb]

Ok, this was my solution, but please feel free to tell me if there's a better way of doing this.

 

The function creating the breadcrumbs was $this->breadcrumbs().  So, I str_replaced it like:

 

<?php echo str_replace('</div>','<div style="float:right;position: relative;top:-16px;"><a href="'.BASE_URL.'rss"><img src="'.BASE_URL.'public/stylesheets/img_dirtylicious/rss.png" alt="rss" style="border: 0px;" /> RSS Feed</a></div></div>', $this->breadcrumbs('->')); ?>

 

It seems to be doing what I want it to do, though I'm sure there's better ways to do this.  The page is a fixed width, so I don't think there's going to be too many bugs.

[mtylerb]

Ok, major problems now in IE7.  *Sigh*, I don't know what I did wrong.  It works perfectly in FF!

[SuperBlue]

You should include the RSS icon/link inside the breadcrumb division.

[mtylerb]

I did, that's what the str_replace accomplished.  After the str_replace, the code looked like:

 

<div class="path">
      <div class="breadcrumb">
<a href="http://www.tbeckett.net/" title="Home Page">Home Page</a> <span class="breadcrumb-separator">-></span>
<a href="http://www.tbeckett.net/articles.xhtml" title="Articles">Articles</a> <span class="breadcrumb-separator">-></span>

<a href="http://www.tbeckett.net/articles/politics.xhtml" title="Politics">Politics</a> <span class="breadcrumb-separator">-></span>
<span class="breadcrumb-current">Political Leaning</span><div style="float:right;position: relative;top:-16px;"><a href="http://www.tbeckett.net/rss"><img src="http://www.tbeckett.net/public/stylesheets/img_dirtylicious/rss.png" alt="rss" style="border: 0px;" /> RSS Feed</a></div></div>
   </div> <!-- end #path-->

 

As soon as this was in place, IE no longer worked.  FF and Opera did, but IE started displaying the left hand menus below the main content.  After I removed it, IE reverted back to normal.  I'm sure it has something to do with the float.

[mtylerb]

I've also tried changing the second part with the RSS link and image to be a span instead of a div and the result is the same.  It's broken in IE.  The code with span instead of div looks like:

 

<div class="path">
      <div class="breadcrumb">
<a href="http://www.tbeckett.net/" title="Home Page">Home Page</a> <span class="breadcrumb-separator">-></span>
<a href="http://www.tbeckett.net/articles.xhtml" title="Articles">Articles</a> <span class="breadcrumb-separator">-></span>

<a href="http://www.tbeckett.net/articles/politics.xhtml" title="Politics">Politics</a> <span class="breadcrumb-separator">-></span>
<span class="breadcrumb-current">Political Leaning</span><span style="float:right;position: relative;top:-16px;"><a href="http://www.tbeckett.net/rss"><img src="http://www.tbeckett.net/public/stylesheets/img_dirtylicious/rss.png" alt="rss" style="vertical-align:middle;border: 0px;" /> RSS Feed</a></span></div>
   </div> <!-- end #path-->

 

I'll leave it like that for now so you can see it, if you want.  It only affects IE, I only have access to IE7, so I don't know about other versions.

[SuperBlue]

You are floating it towards the right, so put it before the other links like below:

 

<div class="breadcrumb"><span style="float:right;"><a href="http://www.tbeckett.net/rss"><img 

src="http://www.tbeckett.net/public/stylesheets/img_dirtylicious/rss.png" alt="rss" style="vertical-align:middle;border: 

0px;" /> RSS Feed</a></span>
<a href="http://www.tbeckett.net/" title="Home Page">Home Page</a> <span class="breadcrumb-separator">-></span> 
<a href="http://www.tbeckett.net/articles.xhtml" title="Articles">Articles</a> <span class="breadcrumb-separator">-></span> 
<a href="http://www.tbeckett.net/articles/politics.xhtml" title="Politics">Politics</a> <span 

class="breadcrumb-separator">-></span> 
<span class="breadcrumb-current">Political Leaning</span></div>

 

Or remember to clear your float so it doesn't effect the rest of the page flow, like below:

<div class="breadcrumb">
<a href="http://www.tbeckett.net/" title="Home Page">Home Page</a> <span class="breadcrumb-separator">-></span> 
<a href="http://www.tbeckett.net/articles.xhtml" title="Articles">Articles</a> <span class="breadcrumb-separator">-></span> 
<a href="http://www.tbeckett.net/articles/politics.xhtml" title="Politics">Politics</a> <span 

class="breadcrumb-separator">-></span> 
<span class="breadcrumb-current">Political Leaning</span><span style="float:right;position:relative;top:-1.2em;"><a 

href="http://www.tbeckett.net/rss"><img src="http://www.tbeckett.net/public/stylesheets/img_dirtylicious/rss.png" alt="rss" 

style="vertical-align:middle;border: 0px;" /> RSS Feed</a></span><br style="clear:both;"></div>

 

It almost look the same in IE6 as in IE7, so chances are that either of above will fix the issue in IE6 as well as in IE7. 

[BoltZ]

Can you give us your site link?

[mtylerb]

http://www.tbeckett.net/

 

I thought it was in enough of the code.  I went with BlueBoden's first solution in his last post and it works wonderfully!

 

Thanks guys!