align a cell to the right (not text-align) 1

[stakadush]

hello
i have the following scheme:

<style type="text/css">
html,body {
	margin:0;
	padding:0;
	height:100%;
	border:none;
}
.mainTable{
	top: 0px;
	left: 0px;
	margin: 0px;
	padding: 0px 0px 0px 0px;
	width: 100%;
	height: 100%;
	display: table;
	border: 0px;
	border-collapse: collapse;
	border-spacing: 0px;
	letter-spacing: 0px 0px 0px 0px;
	z-index: 0;
}

.tabsContainer {
	height: 20px;
}

.tabsTable {
	top: 0px;
	left: 0px;
	margin: 0px;
	padding: 0px 0px 0px 0px;
	height: 20px;
	display: table;
	border-spacing: 0px;
	border-collapse: collapse;
	border: 0px;
	letter-spacing: 0px 0px 0px 0px;
}

.tab {
	border: 1px solid rgb(153,153,153);
	padding: 5px 10px 5px 9px;
	background-image: url(../images/tab_bg.gif);
	color: rgb(8,52,25);
	height: 20px;
	font-size: 14px;
	white-space: nowrap;
	font-family: Verdana, Arial, sans-serif;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
}

#contents {
	width: 100%;
}

.tabSeperator {
	width: 20px;
}
</style>
<table border="0" cellspacing="0" cellpadding="0" class="mainTable">
<tbody>
<tr>
  <td class="tabsContainer" height="20">
    <table border="0" cellspacing="0" cellpadding="0" class="tabsTable">
      <tbody>
      <tr>
        <td class="tab" id="tab1">tab1</td>
	<td class="tabSeperator">&nbsp</td>
        <td class="tab" id="tab1">tab2</td>
	<td class="tabSeperator">&nbsp</td>
        <td class="tab" id="tab1">tab3</td>
	<td class="tabSeperator">&nbsp</td>
        <td class="tab" id="tab1">tab4</td>
	<td class="tabSeperator">&nbsp</td>
        <td class="tab" id="tab1">tab5</td>
      </tr>
      </tbody>
    </table>
  </td>
</tr>
<tr>
  <td id="contents">&nbsp;</td>
</tr>
</tbody>
</table>

i would like tab5 to be aligned to the right side of the table, while all the others are aligned to the left side. basically stretching the tabSeperator cell between tab4 & tab5. i don't want to use javascript to calculate, and i don't want pixels because i want it to be relative to the window size, always attached to the right corner. is there a way to do this with css? i tried float:right;, but didn't help.

thanks

(-:

 

[dwarfthrower]

If you make the width of your table 100% isn't the right-most column automatically alligned to the right of the page?

_{Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.}

 

[stakadush]

no..it comes after the one before. nothing makes it align to the right. if i make the tabsTable 100% width then it will make the spaces between all the cells bigger. i want to keep the same design and only push the last one to the right side.

copy & paste the code and you will see what happens.

(-:

 

[BillyRayPreachersSon]

If you give all of your columns (cells) a width, with the last having 100%, and give the table a style of "table-layout:fixed", that should work, I believe.

Hope this helps,
Dan


[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[ChrisHunt]

If you could give the tabs a fixed width, you could do something like this (untested):

.tabs {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 0;
    overflow: auto;
}

.tabs li {
    float: left;
    width: 5em;
    list-style: none;
    border: 1px solid rgb(153,153,153);
    margin: 0 1em 0 0;
    padding: 5px 10px 5px 9px;
    background-image: url(../images/tab_bg.gif);
    color: rgb(8,52,25);
    height: 20px;
    font-size: 14px;
    white-space: nowrap;
    font-family: Verdana, Arial, sans-serif;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
}

#tab5 {
   float: right;
}

...

<ul class="tabs">
  <li id="tab1">tab1</li>
  <li id="tab2">tab2</li>
  <li id="tab3">tab3</li>
  <li id="tab4">tab4</li>
  <li id="tab5">tab5</li>
</ul>

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[stakadush]

working nice...thanks...just had to remove the overflow: auto; from the .tabs class

(-: