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 set a CSS background to scroll slowly?

    How do I set the width of inputs within a column in Twitter Bootstrap's grid system?

    How to vertically align and stretch content using CSS flexbox

    How do I evenly space these links within my navbar div?

    How to place the same image at the top and at the bottom of the same column?

    CSS Flexbox : How to construct a specific layout

    How to force IE to place two div boxes next to each other in it's browser window?

    How to make the jQuery datePicker popup opaque and always in the foreground?

    how to change radio buttons style in h:selectOneRadio

    How to Replace image in CSS background using jQuery?

    CSS: How to set hover effect on menu-item when submenu-item is displayed

    How can I style this span for a quote without causing this layout problem?

    Html, CSS - How to create a donut chart like this?

    How do you resize a container between two others?

    Heroku Not Showing SCSS Background Images

    How to get the CSS left-property value of a div using JavaScript?

    How to have 2+ boxes slide down

    How to get menu text vertically aligned with inherited height

    How do I center my logo image to another div in CSS horizontally and vertically?

    How to set body attribute in css using angularjs?

    How do I conditionally apply CSS styles in AngularJS?

    How do I automatically resize an image for a mobile site?

    How to align text vertical CSS

    How to prevent Float contents overlap other contents below

    How can I make a button-link, as Like in Facebook?

    How can I properly align two divs that fold atop each other when browser is shrinked?

    How to position an element at the TOP LEFT corner of a page using CSS?

    How to convert html & css to an image?

    How to magnify a pure CSS menu item when hovering using JS?

    How to customize the EditorFor CSS with razor