How to achieve this view?


Tags: html,css

Problem :

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; }


Solution :

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.

    CSS Howto..

    How to hide CSS background images that use !important

    Large gap between text, how to fix?

    How to add the footer with social icons in bootstrap?

    How to make pure css floating tooltips (absolutely positioned span) dynamically resize to accommodate text

    How to make width of nested CSS elements all the same?

    how to add parent class in css file?

    What do i need and how do I start to adjust the css of a website with “encrypted” .gz files

    How to make video responsive for all the screen sizes?

    Having css issues div ahref showing up behind others, domino effect

    How to make ul nav fill the entire bottom of page evenly (without table display)

    css how to make the background image padding to right

    How to make an image display above the background of an :after element

    How to hover over a div to change just a part of its background?

    how to select a Div ID that does not have a specifc class/es

    How do I edit the VIM Omni Completion so that all CSS properties do not end in a colon?

    How to replace fixed values in responsible form css

    How to make text svg-animation launch when visible?

    How to create a speech bubble in css?

    How do prevent a div from resizing? [closed]

    White space in between banner image and menu bar on site-only 1080px screen and lower. How to fix? [closed]

    How to save(download) HTML page with all images, css etc in Android?

    How to double an image size in HTML using only CSS?

    How to change nested divs within a named div to display as display:inline using CSS or jQuery selectors?

    How to center jqPagination widget?

    CSS - How to create diagonal emboss?

    How to force the horizontal scroll bar to appear?

    How to fit content of a DIV with fixed height

    How do I move this label inside my textarea?

    How to auto position sidenav in twitter bootstrap while sliding

    How to get rid of this whitespace in internet explorer?