I want to achieve this view: I can do it with tables but when

Question

0

Editorial Team

Asked: May 31, 20262026-05-31T08:09:40+00:00 2026-05-31T08:09:40+00:00

I want to achieve this view: I can do it with tables but when

0

I want to achieve this view:
enter image description here

I can do it with tables but when I do it with DIVs it just collapses. I did like this:

    <div class="fl25"><h3>S&ouml;kande och uppfinnare</h3></div>
        <div class="clear">&nbsp;</div>
        <div class="fl20">Registrera:</div>
        <div class="fl15"><input type="checkbox"    name="<%= PandoraFieldConstants.FIELD_ADD_SOKANDE %>">S&ouml;kande</div>
        <div class="fl15"><input type="checkbox"    <% if (ansokanInfo.getUppfinnareList().contains(editPerson)) { %> 
    checked="checked""
    <% } %> name="<%= PandoraFieldConstants.FIELD_ADD_UPPFINNARE %>">Uppfinnare</div>

        <div class="clear lh10"></div>
        <div class="clear"></div>
<div class="example1">
    <div class="example_column1"><fieldset class="whiteborder">
         <legend><i>Fysisk person</i></legend><br> 
        <div class="fl20">F&ouml;rnamn:</div>
        <div class="fl20"><input type="text" size="20" value="<%=editPerson.getFornamn() %>" name="<%= PandoraFieldConstants.FIELD_FORNAMN %>"></div>       
        <div class="fl20">Efternamn:</div>
        <div class="fl20"><input type="text" size="20" value="<%=editPerson.getEfternamn() %>" name="<%= PandoraFieldConstants.FIELD_EFTERNAMN %>"></div>
        </fieldset></div>
    <div class="example_column2">
        <div class="fl20">S&ouml;k person/f&ouml;retag<input type="button" value="S&ouml;k" onClick="getElementById('popupSokNamn').style.display=''">
        </div>
    </div>

With CSS

.whiteborder {     color: #ffffff;      border: 3px solid #ffffff;      padding: 10px;      margin: 10px; }

div.example1
{
width: 500;
color: #ffffff;
}
div.example1 div
{
float: left;
height: 100px;
}
div.example1 div.example_column1
{
width: 450px;
}
div.example1 div.example_column2
{
width: 50px;
}

Now that is not working although it appears to be the right thing to do. Now I’m lost for ideas which the one way is of achieving the view which is so easy to do with tables and nearly impossible to do with DIVs

Can you advice me how to do the view? i asked about this before but the scope was insufficient (How to make a white square around my form fields?)

I’ve made my best effort and I can’t seem to place the button with “Sök person/företag” to the right and the labels for the form don’t align properly either:

enter image description here

The code I used is

        <div class="fl25"><h3>S&ouml;kande och uppfinnare</h3></div>
        <div class="clear">&nbsp;</div>
        <div class="fl20">Registrera:</div>
        <div class="fl15"><input type="checkbox"    name="<%= PandoraFieldConstants.FIELD_ADD_SOKANDE %>">S&ouml;kande</div>
        <div class="fl15"><input type="checkbox"    <% if (ansokanInfo.getUppfinnareList().contains(editPerson)) { %> 
    checked="checked""
    <% } %> name="<%= PandoraFieldConstants.FIELD_ADD_UPPFINNARE %>">Uppfinnare</div>

<div class="fl20"><input type="button" value="S&ouml;k person/f&ouml;retag"></div>
        <div class="clear lh10"></div>
        <div class="clear"></div>
        <div class="fl20"></div>&nbsp;
                <fieldset class="whiteborder"><legend><i>Fysisk person</i></legend> 
    <br>        
        <div class="fl20">F&ouml;rnamn::</div>
        <div class="fl20"><input type="text" size="60" value="<%=editPerson.getFornamn() %>" name="<%= PandoraFieldConstants.FIELD_FORNAMN %>"></div>
        <div class="clear"></div>
        <div class="fl20">Efternamn:</div>
        <div class="fl20"><input type="text" size="60" value="<%=editPerson.getEfternamn() %>" name="<%= PandoraFieldConstants.FIELD_EFTERNAMN %>"></div>
        <div class="clear">&nbsp;</div>
        </fieldset>

Update

The answers did not work for me. I can achieve nearly what I want but it’s not complete:
enter image description here
All the code to render the page is

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <link href="css_js/styles.css" rel="stylesheet" type="text/css">
    <link href="css_js/positions.css" rel="stylesheet" type="text/css">
    <link href="css_js/floats.css" rel="stylesheet" type="text/css">
    <script src="css_js/sorttable.js"></script>
    <script language="JavaScript1.2" src="css_js/general_arendeprocess.js"></script>

    <script language="JavaScript1.2" type="text/javascript">
    function ingVar(x) { 
    var applicationDependence;
    applicationDependence = x;
    document.getElementById('ff').style.display='none';
    document.getElementById('avd').style.display='none';
    document.getElementById('utb').style.display='none';
    document.getElementById('oepa').style.display='none';
    document.getElementById('aooep').style.display='none';
    if (applicationDependence == 'ff'){ 
            document.getElementById('ob').style.display='none';
            document.getElementById('ff').style.display='';
            }
    if  (applicationDependence == 'avd'){
            document.getElementById('ob').style.display='none';
            document.getElementById('avd').style.display='';
            }
    if  (applicationDependence == 'utb'){
            document.getElementById('ob').style.display='none';
            document.getElementById('utb').style.display='';
            }       
    if  (applicationDependence == 'oepa'){
            document.getElementById('ob').style.display='none';
            document.getElementById('oepa').style.display='';
            }
    if  (applicationDependence == 'aooep'){
            document.getElementById('ob').style.display='none';
            document.getElementById('aooep').style.display='';
            }       
    if  (applicationDependence == 'ob'){
            document.getElementById('ob').style.display='';
            }       
    }
    </script>
    <title>Ingivningsdag - NAT. - Pandora </title>
</head>






<body><form name="actionForm" action="PandoraActionServlet" style="display: inline;" method="post">
    <input type="hidden" name="currPage" value="/PandoraArendeWeb/20120306_grunduppgifter.jsp" />
    <input type="hidden" name="action" value="" />
    <input type="hidden" name="actionCommand" value="" />
    <input type="hidden" name="actionModifier" value="" />
    <input type="hidden" name="actionTarget" value="" />
    <input type="hidden" name="destination" value="" />
    <input type="hidden" name="currIndex" value="" />
    <div id="top">
        <div id="av_logga">
            <br>
            <span class="small60">Nummer: <input type="text" size="40"> <input type="button" value="S&ouml;k"></span>
        </div>
        <img src="../images/prvision.gif" alt="" width="109" height="30" border="0" style="margin: 4px 13px;">
        <div class="avnamn">
            Pandora
        </div>
        <div  id="flikkant" class="flikkant1">
            <span class="sub_meny_r"><img src="../images/avdelare.gif" alt="" width="2" height="20" border="0" style="display: inline;"></span>
            <span class="sub_meny_r sub_meny_rm">Logga ut</span>
            <span class="sub_meny_r"><img src="../images/avdelare.gif" alt="" width="2" height="20" border="0" style="display: inline;"></span>
            <span class="sub_meny_r sub_meny_rm">?</span>
            <span class="sub_meny_r"><img src="../images/avdelare.gif" alt="" width="2" height="20" border="0" style="display: inline;"></span>
            <span class="sub_meny_r sub_meny_rm">S&ouml;k</span>
            <span class="sub_meny_r"><img src="../images/avdelare.gif" alt="" width="2" height="20" border="0" style="display: inline;"></span> 
            <img src="../images/avdelare.gif" alt="" width="2" height="20" border="0" style="display: inline;">
            <a href="ankomstregistrering.html"><span class="sub_meny">Ankomst</span></a>
            <img src="../images/avdelare.gif" alt="" width="2" height="20" border="0" style="display: inline;">
            <a href="formalialista.html"><span class="sub_meny_active">Formell</span></a>
            <img src="../images/avdelare.gif" alt="" width="2" height="20" border="0" style="display: inline;">
            <a href="formalialista.html"><span class="sub_meny">Juridisk</span></a>
            <img src="../images/avdelare.gif" alt="" width="2" height="20" border="0" style="display: inline;">
            <span class="sub_meny">Teknisk</span>
            <img src="../images/avdelare.gif" alt="" width="2" height="20" border="0" style="display: inline;">
            <span class="sub_meny">Publicering</span>
            <img src="../images/avdelare.gif" alt="" width="2" height="20" border="0" style="display: inline;">
            <span class="sub_meny"> Kundregister</span>
            <img src="../images/avdelare.gif" alt="" width="2" height="20" border="0" style="display: inline;">
            <span class="sub_meny">Expediering</span>
            <img src="../images/avdelare.gif" alt="" width="2" height="20" border="0" style="display: inline;">
        </div><!-- filkkant -->
</div><!-- top -->


<!-- F-handl&auml;ggning -->
<div id="sub" class="sub">
    <span style="float:right">
         <span class="sub_meny_sm">Senast &ouml;ppnade:</span> 
         <span class="sub_meny_sm link">1234567-9</span>
          <span class="sub_meny_sm link">1234567-9</span>
         <span class="sub_meny_sm link">S&ouml;kresultat</span>
    </span>
    <a href=formellkontroll.html><span class="sub_meny_active " onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'" >Formell kontroll</span> </a>
     <a href=fordelalista.html><span class="sub_meny " onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'">F&ouml;rdelning</span> </a>
    <a href=klassningslista.html><span class="sub_meny " onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'">Klassning</span> </a>
</div><!-- sub -->

<div id="yta">
<p>&nbsp;</p>

<table width="100%" border="0" cellspacing="0" cellpadding="4" align="center" class="TB_bo" style="border-bottom:0;">
<tr>
    <td class="TD_bo hknot"> <a href=oversikt.html><span onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'">&Ouml;versikt</span></a></td>
        <td class="TD_bo hk TB_bo_hk sub_meny_active">Grunduppgifter</td>
    <td class="TD_bo hknot"> <a href=checklista.html><span  onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'">Checklista</span> </a></td>
    <td class="TD_bo hknot"> <a href=klass.html><span  onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'">Klass</span> </a></td>
    <td class="TD_bo hknot"> <a href=its.html><span onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'">ITS</span> </a></td>
    <td class="TD_bo hknot"> <a href=frister><span  onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'">Status</span> </a></td>
    <td class="TD_bo hknot"> <a href=handlingar><span  onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'">Handlingar</span> </a></td>
    <td class="TD_bo hknot"> <a href=frister><span  onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'">Frister</span> </a></td>
    <td class="TD_bo2 hknot"> <a href=rapporter><span  onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'">Rapporter</span> </a></td>
</tr>
</table>

<table width="100%" border="0" cellspacing="0" cellpadding="4" align="center" class="TB_bo2B">
    <tr>
        <td colspan="1" class="pusher td40"><h1>Svensk patentans&ouml;kan</h1></td>
        <td rowspan="2" width="40%">&nbsp;</td>
        <td colspan="3"><span class="link">Visa akt</span></td>
    </tr>
    <tr>
        <td class="pusher"><h1>SE 9304251-3</h1><h2 class="pusher">Inte offentlig</h2></td>
        <td class="link ssmall">Betalningar</td>
        <td class="link ssmall">Dagbok</td>
        <td class="link ssmall">Noteringar</td>
    </tr>
</table>



<!--sidinneh&aring;ll-->

<div class="yta2  TB_nb fontS80 ">
    <div class="clear ">&nbsp;</div>
    <div class="fr1 ">&nbsp;</div>
    <div class="fr5 "><input type="button" value="Historik"></div>
    <div class="fl30"><h2>Grunduppgifter</h2></div>
    <div class="clear quarter">&nbsp;</div>
</div>
<div class="clear "></div>

<div id="indag" class="yta2   TB_nb fontS80">
    <div class="clear half">&nbsp;</div>
    <div class="fl10"><h3>Ingivningsdag</h3></div>

    <div class="fl20">Ans&ouml;kans beroende:</div>
    <div class="fl20"><select name="ansokanBeroende" onchange="ingVar(this.value);">
    <option value="ob" SELECTED>Oberoende ans&ouml;kan</option>
    <option value="ff">Fullf&ouml;ljd</option>
    <option value="avd">Avdelad</option>
    <option value="utb">Utbruten</option>
    <option value="oepa">Omvandlad EP-ans&ouml;kan</option>
    <option value="aooep">Avdelad och omvandlad EP-ans&ouml;kan</option>
    </select></div>
    <div class="fl10">&nbsp;</div>
    <div class="fl1">&nbsp;</div>
    <div class="fl20"><input type="checkbox" value="">Ingivningsdag kan inte tilldelas</div>
    <div class="clear"></div>

    <div id="ob">
        <div class="fr10 smallg">F&ouml;rnamn Efternamn,<br>handl&auml;ggarkod<br><br></div>
        <div class="fl10"></div>
        <div id="datum" class="fl20">Datum ingivningsdag:</div>
        <div class="fl20"><input type="text" name="ingivningsdag" 
    id="ingivningsdag" value="">&nbsp;<img src="images/cal.gif" alt="" width="16" height="15" border="0" onclick="javascript:openCalWin('620','300','ingivningsdag')"></div>

    </div>

    <div id="ff" style="display: none;">
        <div class="fr10 smallg">F&ouml;rnamn Efternamn,<br>handl&auml;ggarkod</div>
        <div class="fl10"></div>
        <div class="fl20">Fullf&ouml;ljd fr&aring;n:</div>
        <div class="fl20"><input type="text"></div>
        <div class="clear"></div>
        <div class="fl10"></div>
        <div class="fl20">WO-nummer:</div>
        <div class="fl20"><input type="text"></div>
        <div class="clear"></div>
        <div class="fl10"></div>
        <div class="fl20">Internationell ingivningsdag:</div>
        <div class="fl20"><input type="text">&nbsp;<img src="../images/minikal.jpg" alt="" width="16" height="15" border="0"></div>
    </div>

    <div id="avd" style="display: none;">
        <div class="fr10 smallg">F&ouml;rnamn Efternamn,<br>handl&auml;ggarkod</div>
        <div class="fl10"></div>
        <div class="fl20">Avdelad fr&aring;n:</div>
        <div class="fl20"><input type="text"><input type="button" value="S&ouml;k"></div>
        <div class="clear"></div>
        <div class="fl10"></div>
        <div id="datum" class="fl20">Datum ingivningsdag:</div>
        <div class="fl20"><input type="text">&nbsp;<img src="../images/minikal.jpg" alt="" width="16" height="15" border="0"></div>
    </div>

    <div id="utb" style="display: none;">
        <div class="fr10 smallg">F&ouml;rnamn Efternamn,<br>handl&auml;ggarkod</div>
        <div class="fl10"></div>
        <div class="fl20">Utbruten fr&aring;n:</div>
        <div class="fl20"><input type="text"><input type="button" value="S&ouml;k"></div>
        <div class="clear"></div>
        <div class="fl10"></div>
        <div id="datum" class="fl20">Datum ingivningsdag:</div>
        <div class="fl20"><input type="text">&nbsp;<img src="../images/minikal.jpg" alt="" width="16" height="15" border="0"></div>
    </div>

    <div id="oepa" style="display: none;">
        <div class="fr10 smallg">F&ouml;rnamn Efternamn,<br>handl&auml;ggarkod</div>
        <div class="fl10"></div>
        <div class="fl20">EP- ans&ouml;kningsnummer:</div>
        <div class="fl20"><input type="text"><input type="button" value="S&ouml;k"></div>
        <div class="clear"></div>
        <div class="fl10"></div>
        <div id="datum" class="fl20">Ankomstdatum (EP-ans&ouml;kan)<br>eller ingivningsdag  (EP-ans&ouml;kan):</div>
        <div class="fl20 mt5p"><input type="text">&nbsp;<img src="../images/minikal.jpg" alt="" width="16" height="15" border="0"></div>
    </div>

    <div id="aooep" style="display: none;">
        <div class="fr10 smallg">F&ouml;rnamn Efternamn,<br>handl&auml;ggarkod</div>
        <div class="fl10"></div>
        <div class="fl20">Avdelad fr&aring;n:</div>
        <div class="fl20"><input type="text"><input type="button" value="S&ouml;k"></div>
        <div class="clear"></div>
        <div class="fl10"></div>
        <div class="fl20">EP- ans&ouml;kningsnummer:</div>
        <div class="fl20"><input type="text"><input type="button" value="S&ouml;k"></div>
        <div class="clear"></div>
        <div class="fl10"></div>
        <div id="datum" class="fl20">Ankomstdatum (EP-ans&ouml;kan)<br>eller ingivningsdag  (EP-ans&ouml;kan):</div>
        <div class="fl20 mt5p"><input type="text">&nbsp;<img src="../images/minikal.jpg" alt="" width="16" height="15" border="0"></div>
    </div>

    <div class="fl10"></div>


    <div class="clear"></div>
</div><!-- indag -->

<div class="clear lh10">&nbsp;</div>

<div id="sokupp" class="yta2   TB_nb fontS80">
    <div class="fl50" id="L-col">
        <div class="clear half">&nbsp;</div>
        <div class="fl25"><h3>S&ouml;kande och uppfinnare</h3></div>
        <div class="clear">&nbsp;</div>
        <div class="fl20">Registrera:</div>
        <div class="fl15"><input type="checkbox"    name="addSokande">S&ouml;kande</div>
        <div class="fl15"><input type="checkbox"     
    checked="checked""
     name="addUppfinnare">Uppfinnare</div>

<div class="fl20"><input type="button" value="S&ouml;k person/f&ouml;retag"></div>
        <div class="clear lh10"></div>
        <div class="clear"></div>
        <div class="fl20"></div>&nbsp;
                <fieldset class="whiteborder"><legend><i>Fysisk person</i></legend> 
    <br>        
        <div class="fl20">F&ouml;rnamn:</div>
        <div class="fl20"><input type="text" size="60" value="Lo 3" name="fornamn"></div>
        <div class="clear"></div>
        <div class="fl20">Efternamn:</div>
        <div class="fl20"><input type="text" size="60" value="Tass 3" name="efternamn"></div>
        <div class="clear">&nbsp;</div>
        </fieldset>
    &nbsp;
        <fieldset class="whiteborder"><legend><i>Juridisk person</i></legend> 

    <br>

        <div class="fl20">F&ouml;retag:</div>
        <div class="fl20"><input type="text" size="60" value="" name="foretag"></div>
        <div class="clear"></div>
        <div class="fl20">Organisationsnummer:</div>
        <div class="fl20"><input type="text" size="60" name="orgnummer"></div>
        <div class="clear">&nbsp;</div>
        </fieldset>
        <div class="fl20">Attention, c/o etc:</div>
        <div class="fl40"><input type="text" size="60" name="att" value=""></div>
        <div class="clear"></div>
        <div class="fl20">Postadress:</div>
        <div class="fl40"><input type="text" size="60" name="postadress" value=""></div>
        <div class="clear"></div>
        <div class="fl20">Postnummer:</div>
        <div class="fl40"><input type="text" size="30" name="postnr" value=""></div>
        <div class="clear"></div>
        <div class="fl20">Postort:</div>
        <div class="fl40"><input type="text" size="30" name="postort" value=""></div>
        <div class="clear"></div>
        <div class="fl20">Land:</div>
        <div class="fl40"><input type="text" size="2" value="SE" name="landkod">&nbsp;
                    <select name="">
                        <option value="1" SELECTED></option>
                        <option value="2"></option>
                        <option value="3"></option>
                        <option value="4"></option>
                        <option value="5">---------------------------------</option>
        </select></div>
        <div class="clear"></div>
        <div class="fl20">Region:</div>
        <div class="fl20"><select name="region">
                        <option value="1" SELECTED></option>
                        <option value="2"></option>
                        <option value="3"></option>
                        <option value="4"></option>
                        <option value="5">-----------------------------------------------</option>
        </select></div>
        <div class="clear"></div>
        <div class="fl20">Tel:</div>
        <div class="fl40"><input type="text" size="40" name="tel"></div>
        <div class="clear"></div>
        <div class="fl20">Fax:</div>
        <div class="fl40"><input type="text" size="40" name="fax"></div>
        <div class="clear"></div>
        <div class="fl20">E-post:</div>
        <div class="fl40"><input type="text" size="60" name="epost"></div>
        <div class="clear"></div>
        <div class="fl20">&nbsp;</div>

        <div class="clear lh10 bb fl80">&nbsp;</div>
        <div class="clear half">&nbsp;</div>
        <div class="fl20">&nbsp;</div>
        <div class="fl20"><input type="button" value="Ta bort"></div>
        <div class="fl20"><input type="button" value="Avbryt">&nbsp;<input type="button" value="L&auml;gg till" onclick="javascript:doSubmitWithTarget('Grunduppgifter','addPerson','')"></div>
    </div>

…

Update

I could get close but it’s impossible to do the simple thing I want since the graphic components behave completely randomly going left, right or down for no appearant reason. The view I can achieve is:

enter image description here

The code that does this nearly the way I want is:

<div id="sokupp" class="yta2   TB_nb fontS80">
    <div class="fl50" id="L-col">
        <div class="clear half">&nbsp;</div>
        <div class="fl25"><h3>S&ouml;kande och uppfinnare</h3></div>
        <div class="clear">&nbsp;</div>
        <div class="fl20">Registrera:</div>
        <div class="fl15"><input type="checkbox"    name="addSokande">S&ouml;kande</div>
        <div class="fl15"><input type="checkbox"     
    checked="checked""
     name="addUppfinnare">Uppfinnare</div>

<div class="fl20"><input type="button" value="S&ouml;k person/f&ouml;retag"></div>
        <div class="clear lh10"></div>
        <div class="clear"></div>
        <div class="fl20"></div>

            <div id="example1">     <div class="example_column1"><fieldset class="whiteborder">     
                 <legend><i>Fysisk person</i></legend><br> <table><tr><td>    
                      <div>F&ouml;rnamn:</div>  </td><td>
                      <div><input type="text" size="20" value="Bla" name="blub"></div></td></tr>   
                      <tr><td><div>Efternamn:</div></td><td>
                      <div><input type="text" size="20" value="bli" name="blu"></div></td></tr></table> 
                      </fieldset>     </div>  
                      <div class="example_column2"><div class="fl20">S&ouml;k person/f&ouml;retag<input type="button" value="S&ouml;k" onClick="getElementById('popupSokNamn').style.display=''"></div>      </div> </div>

Solution

In this case I could finally make it work using this code:

HTML

<div id="example1">
<div class="example_column1">
<fieldset class="whiteborder"> <legend><i>Fysisk person</i></legend>
F&ouml;rnamn:<input type="text" size="60" value="Bla" name="blub">
Efternamn:<input type="text" size="60" value="Bla" name="blub"></fieldset>
</div>
<br><br><div class="example_column2">
S&ouml;k person/<br>f&ouml;retag:<br>
<input type="button" value="S&ouml;k" onClick="getElementById('popupSokNamn').style.display=''">
</div> </div>

CSS

.whiteborder {     color: #ffffff;      border: 3px solid #ffffff;      padding: 10px;      margin: 10px; }
#example1 { width: 550; color: #ffffff; }
.example_column1 {     color: #000000; margin: 0;      padding: 0;     width: 470px;     border:0;     float: left; }
.example_column2 {     color: #000000;margin: 0;      padding: 0;     border:0;     width: 80px;     float: right; }

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-05-31T08:09:41+00:00

I think you are looking for something like this:

<html><head><style>
div {background: gray;}
.whiteborder {     color: #ffffff;      border: 3px solid #ffffff;      padding: 10px;      margin: 10px; }
#example1
{
width: 500;
color: #ffffff;
}
.example_column1
{
    margin: 0; 
    padding: 0;
    width: 450px;
    border:0;
    float: left;
}
.example_column2
{
    margin: 0; 
    padding: 0;
    border:0;
    width: 50px;
    float: right;
}

</style></head>
<body>

<div id="example1">
    <div class="example_column1"><fieldset class="whiteborder">
         <legend><i>Fysisk person</i></legend><br> 
        <div>F&ouml;rnamn:</div>
        <div><input type="text" size="20" value="Bla" name="blub"></div>       
        <div>Efternamn:</div>
        <div><input type="text" size="20" value="bli" name="blu"></div>
        </fieldset>
    </div>
     <div class="example_column2">
        <div>S&ouml;k person/f&ouml;retag<input type="button" value="S&ouml;k" onClick="getElementById('popupSokNamn').style.display=''"></div>
     </div>
</div>
</body>

In my browser that looks quite similar to the result you want. A few points I think I should mention:

For debugging purposes I like to give all elements a coloured border (border: 1px solid red for example). That can be a problem when working with fixed width layouts:
When using fixed pixel width, setting margin, padding and border explicitly to 0 can help a lot. A border of 1 pixel is added to the width of the column, so example_column1 would be 450 + 2 = 452 pixel wide. That makes example_column2 too wide to fit in the overall example1 container of 500 pixels, and you will never get them to dislpay side by side.
In general, when you run into this sort of problem, strip down your html to the basic minimum required to reproduce your problem, and then adjust your css. For example in this case I threw out all the fieldset stuff and used only three empty div’s (example1, example_column1 and example_column2), until I got them aligned properly. Then I added the fieldset back in to see how the whole thing was displayed.

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

I want to achieve this view: I can do it with tables but when

Update

Update

Solution

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply