N
news.frontiernet.net
I am trying to right adjust the last section of information on a line using
<span class="category-link"> and CSS float:right;.
The problem I am having is that, in addition to the firght adjust, this
causes the material in the <span> to drop to this next line and overlap what
is there. An undesireable visual effect..
Here is the code I am using;
<style type="text/css">
#firmheader {border: 1px solid black; background-color: lightgreen;
font-family:Arial; font-size:12; text-align: right; width: 100%;}
..firmheader_text{float: left;}
#firmbox { line-height:90%; padding-top: 2px; padding-bottom: 1px;
border-bottom: 1px solid silver;}
..firstline {position:relative; text-align: right; margin-bottom: 1px;}
..firm {float: left; font-family: arial; font-size: 12pt; font-weight:
bold; margin-left: 5px;}
..secondline {padding-bottom: 2px; margin-left: 15px;}
..contact {color: red; font-family: arial; font-size: 10pt;}
..street {margin-left: 0; color: dimgray; font-size: 10pt;
font-family: Arial, Helvetica;}
..suite {color: dimgray; font-size: 10pt; font-family: Arial, Helvetica;}
..city {color:dimgray;}
..phone {color: red; font:11pt Comic Sans MS; padding-left:10;
padding-right: 10px;}
..chamber {margin-left:3px;}
..category_link {float: right;}
table {border: 2px solid red; margin: 3px}
td {border: 1px dotted purple; padding: 2px;}
</style>
Here is the HTML coding for a typical entry
<div ID="firmheader">
<span class="firmheader_text" >Firm Name</span>
<span class="firmheader_category">Phone Number</span>
</div>
<div ID="firmbox">
<div class="firstline">
<span class="firm">A & B Business Equipment</span>
<span class="phone">507/836-6667</Span>
</div>
<div class="secondline">
<span class="street">914 Fourth Ave</span>
<span class="city">Windom</span>
<span class="chamber"><A HREF="/Business/chamlist.htm">
<img src="images/chamber.jpg" border=0 width="46" height="12"
alt="Click to see a list of ALL Chamber members"></A></span>
<span class="category_link"><a href="wcompute.htm">Computer Sales /
Service</a></span>
</div>
</div>
<div ID="firmheader">
<span class="firmheader_text" >Firm Name</span>
<span class="firmheader_category">Phone Number</span>
</div>
<div ID="firmbox">
<div class="firstline">
<span class="firm">A & B Business Equipment</span>
<span class="phone">507/836-6667</Span>
</div>
<div class="secondline">
<span class="street">914 Fourth Ave</span>
<span class="city">Windom</span>
<span class="chamber"><A HREF="/Business/chamlist.htm">
<img src="images/chamber.jpg" border=0 width="46" height="12"
alt="Click to see a list of ALL Chamber members"></A></span>
<span class="category_link"><a href="wcompute.htm">Computer Sales /
Service</a></span>
</div>
</div>
The resulting example can ve viwed here:
http://www.wgtn.net/Business/wgtnwha_relay_2.htm
Is there a way to use float:right; to achieve right-adjust in a situation
like this? Or must I go to a design that uses fixed boundaries like we used
to have imposed upon us by tables to get control of horizontal and vertical
positioning on screen?
<span class="category-link"> and CSS float:right;.
The problem I am having is that, in addition to the firght adjust, this
causes the material in the <span> to drop to this next line and overlap what
is there. An undesireable visual effect..
Here is the code I am using;
<style type="text/css">
#firmheader {border: 1px solid black; background-color: lightgreen;
font-family:Arial; font-size:12; text-align: right; width: 100%;}
..firmheader_text{float: left;}
#firmbox { line-height:90%; padding-top: 2px; padding-bottom: 1px;
border-bottom: 1px solid silver;}
..firstline {position:relative; text-align: right; margin-bottom: 1px;}
..firm {float: left; font-family: arial; font-size: 12pt; font-weight:
bold; margin-left: 5px;}
..secondline {padding-bottom: 2px; margin-left: 15px;}
..contact {color: red; font-family: arial; font-size: 10pt;}
..street {margin-left: 0; color: dimgray; font-size: 10pt;
font-family: Arial, Helvetica;}
..suite {color: dimgray; font-size: 10pt; font-family: Arial, Helvetica;}
..city {color:dimgray;}
..phone {color: red; font:11pt Comic Sans MS; padding-left:10;
padding-right: 10px;}
..chamber {margin-left:3px;}
..category_link {float: right;}
table {border: 2px solid red; margin: 3px}
td {border: 1px dotted purple; padding: 2px;}
</style>
Here is the HTML coding for a typical entry
<div ID="firmheader">
<span class="firmheader_text" >Firm Name</span>
<span class="firmheader_category">Phone Number</span>
</div>
<div ID="firmbox">
<div class="firstline">
<span class="firm">A & B Business Equipment</span>
<span class="phone">507/836-6667</Span>
</div>
<div class="secondline">
<span class="street">914 Fourth Ave</span>
<span class="city">Windom</span>
<span class="chamber"><A HREF="/Business/chamlist.htm">
<img src="images/chamber.jpg" border=0 width="46" height="12"
alt="Click to see a list of ALL Chamber members"></A></span>
<span class="category_link"><a href="wcompute.htm">Computer Sales /
Service</a></span>
</div>
</div>
<div ID="firmheader">
<span class="firmheader_text" >Firm Name</span>
<span class="firmheader_category">Phone Number</span>
</div>
<div ID="firmbox">
<div class="firstline">
<span class="firm">A & B Business Equipment</span>
<span class="phone">507/836-6667</Span>
</div>
<div class="secondline">
<span class="street">914 Fourth Ave</span>
<span class="city">Windom</span>
<span class="chamber"><A HREF="/Business/chamlist.htm">
<img src="images/chamber.jpg" border=0 width="46" height="12"
alt="Click to see a list of ALL Chamber members"></A></span>
<span class="category_link"><a href="wcompute.htm">Computer Sales /
Service</a></span>
</div>
</div>
The resulting example can ve viwed here:
http://www.wgtn.net/Business/wgtnwha_relay_2.htm
Is there a way to use float:right; to achieve right-adjust in a situation
like this? Or must I go to a design that uses fixed boundaries like we used
to have imposed upon us by tables to get control of horizontal and vertical
positioning on screen?