Change div's width to amount of text...

[cs.punk]

What I am trying to do is a little 'title' box which will show where on the website you are (navigation wise).

 

For example Home / Products / Test

 

But it keeps resizing to the full width of the screen. I just want it to stretch to how long the 'text' is.

 

I tried using float, which does the job but seems to mess up with the design as the second div below it, merges into the it... (see pic attached)

 

Basically what I have is:

.clear {font-size: 1px; height: 1px;}

.sbar {
    margin-left: 20px;
    float: left;
    clear: left;
}

.main {
    margin-left: 250px;
    margin-right: 30px;

}

.loc {
    width: auto;
    clear: both;
    margin-left: 270px;
    float: left;
}

 

And

 

<div class='loc'>
  <div class="tll">
   <div class="trl"><p class='loct'>Home/</p></div>
  </div>
</div>


<div class='sbar'>
<div class="bl">
<div class="br">
  <div class="tl">
   <div class="tr">...</div>
  </div>
</div>
</div>
<div class="clear"> </div>
</div>


<div class='main'>
<div class="blm">
<div class="br">
  <div class="tl">
   <div class="trm">Wellcome!</div>
  </div>
</div>
</div>
<div class="clear"> </div>
</div>

 

All those divs are just the round corners I am implementing...

 

Any ideas?

 

[attachment deleted by admin]