Filling The Top Part Of This Window?

I've got a popup window that looks like this Now I want to top part where the color is green and it says 'Sök efter ärende' to strech all the way of the window so that the X tha

Solution 1:

Change the top (troublesome) table to div:

<div id="topBar">
  <span class="pusher TB_nb"><h2>Sök efter ärende</h2></span>
  <span id="close">
    <a href="javascript:void(0)" onclick="document.getElementById('popupF').style.display = 'none';">X</a>
  </span>
</div>

Then add this css:

#topBar {width:100%; background-color:#EFEFDC;}
#close {position:absolute; right:5px;}

Heres an example: http://jsfiddle.net/FSra3/

On a side note, you really should not be using tables. Tables are for tabular data only, not to be used for layout.

Solution 2:

Hey now add some code add your first table as like this

replace this code of your first table

<table width="100%" border="0" cellspacing="0" cellpadding="2"
    align="center" class="TB_nb" style="display:table;">
    <tr>
        <td width="75%" class="pusher TB_nb"><h2>Sök efter ärende</h2>
        </td>
        <td width="25%" style="text-align:right;"><a href="javascript:void(0)"
            onclick="document.getElementById('popupF').style.display = 'none';">X</a>
        </td>
    </tr>
</table>

Live demo

Solution 3:

Just in case you still want to use table. In css file, you make display style of table as inline table{display:inline;} This makes the table shrink to fit its content. Use this instead: table{display:block;}