Home/ Questions/Q 7400165
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T04:09:49+00:00

In my html-page I try to display a text and a button next to

  • 0

In my html-page I try to display a text and a button next to eachother in a table header:

<th>
<div class="thspan">text1</div>
<div class="bspan"><button class="buttoncss" id="text2"></button></div>
</th>

Using the following css code (rendered via stylus):

table th
  border 0px solid
  font 12px/1.3 "Lucida Grande", Arial, sans-serif
  font-weight bold
  padding-left 5px
  padding-right 5px
  background lightgrey
  clear both

.thspan
  display inline
  float left
  word-wrap break-word
  margin-right 25px

.bspan
  display inline
  float right
  width auto

Resulting in the following css-code:

table{border:1px solid;text-align:left}
table th{border:0 solid;font:12px/1.3 "Lucida Grande",Arial,sans-serif;font-weight:bold;padding-left:5px;padding-right:5px;background:#d3d3d3;clear:both}
table tr{border:1px solid;border-color:#000}
table td{white-space:nowrap;border:0 solid;font:12px/1.3 "Lucida Grande",Arial,sans-serifw;padding-left:10px;padding-right:10px}

However the button shows on the following line. Any idea how this can be fixed?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Give class bspan from button to his div, and set width of that div to auto.

    This is whole page

    <html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style>
    th
    {
      border: 0px solid;
      font :12px/1.3 "Lucida Grande", Arial, sans-serifw;
      font-weight: bold;
      padding-left: 5px;
      padding-right: 5px;
      background :lightgrey;
      clear :both;
    }
    .thspan
     { display: inline;
      float :left;
      word-wrap: break-word;
      margin-right: 6px;
    }
    .bspan
     { display: inline;
      float: right;
      width: auto;
    }
</style>
</head>
    <body>
        <table>
            <th>
                <div class="thspan">text1</div>
                <div class="bspan"><button  id="text2"></button></div>

            </th>
        </table>
    </body>
</html>
    • 0