Nabin Nepal (Starx) css html
March 23, 2012

How to make the DIV equivalent of colspan?

Question by Nick Rosencrantz

Nick RosencrantzNick Rosencrantz

I want to implement this view
enter image description here

But I have one question: The text which says “Munstycke…” should not have the linebreak this far to the left, it should be like in the specification:
enter image description here

My code that achieves the view first mentioned 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>
<%
    final Logger logger = Logger.getLogger("arendeprocess_grunduppgifter.jsp");
    ArendeProcessPageController apc = new ArendeProcessPageController(request);
    GrunduppgifterPageController pc = new GrunduppgifterPageController(request);
    String arendeTyp = apc.getArendeTyp();
    boolean showSearch = false;
    AnsokanInfo ansokanInfo = apc.getAnsokanInfo();
    PersonInfo editPerson = new PersonInfo();
    if(ansokanInfo != null && ansokanInfo.hasEditPersonInfo()) {
        editPerson = ansokanInfo.getEditPersonInfo();
    } else {
        editPerson.setFornamn(apc.getNyregPerson().getFornamn());
        editPerson.setEfternamn(apc.getNyregPerson().getEfternamn());
        editPerson.setForetag(apc.getNyregPerson().getForetag());
        //editPerson.setOrgnr(apc.getNyregPerson().getOrgnr());
        editPerson.setLandKod(apc.getNyregPerson().getLandKod());
    }
    if(apc.getLatestAction().equals("Namnsokning") && apc.getLatestActionCommand().equals("search")) {
        showSearch = true;    
    }

%>

<body><form name="actionForm" action="PandoraActionServlet" style="display: inline;" method="post">
    <input type="hidden" name="currPage" value="<%=request.getRequestURI()%>" />
    <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="" />


<!--sidinneh&aring;ll-->
<div class="form-bg">
<div class="data-bar">
<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>
<div class="data-bar">
<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">Oberoende</div>
    <div class="fl10">&nbsp;</div>
    <div class="fl1">&nbsp;</div>
    <div class="fl20"></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">

        <strong>2009-01-01</strong>
    </div>
<div class="clear"></div>
    <div class="data-bar"></div><br>
    <div class="fl10"><h3>Sökande</h3></div>
    <div class="fl20"><div class="data-box">

    <table border="0">
        <tr><td>c o Andersson</td><td>Telefon</td><td>0707532637</td></tr>
        <tr><td>Angeredsgatan 12 B, 3 tr</td><td>Fax</td><td>7551444</td></tr>
        <tr><td>234 56 Angegerdet</td><td>E-post</td><td>0707532637</td></tr>
        <tr><td>Sverige</td><td>Referens</td><td></td></tr>
        </table>

    </div></div>

    <div class="clear"></div>

    <div class="fl10"><h3>Uppfinnare</h3></div>
    <div class="fl20"><div class="data-box">

    <table id="table" border="0">
        <tr><td>c o Andersson</td><td>Telefon</td><td>0707532637</td></tr>
        <tr><td>Angeredsgatan 12 B, 3 tr</td><td>Fax</td><td>7551444</td></tr>
        <tr><td>234 56 Angegerdet</td><td>E-post</td><td>0707532637</td></tr>
        <tr><td>Sverige</td><td>Referens</td><td></td></tr>
        </table>

    </div></div>


    <div class="clear"></div>

    <div class="fl10"><h3>Ombud sökande 1-2</h3></div>
    <div class="fl20"><div class="data-box">

    <table border="0">
        <tr><td>c o Andersson</td><td>Telefon</td><td>0707532637</td></tr>
        <tr><td>Angeredsgatan 12 B, 3 tr</td><td>Fax</td><td>7551444</td></tr>
        <tr><td>234 56 Angegerdet</td><td>E-post</td><td>0707532637</td></tr>
        <tr><td>Sverige</td><td>Referens</td><td></td></tr>
        </table>

    </div></div>

    <div class="clear"></div>
    <div class="data-bar"></div><div class="clear"></div><br>

    <div class="fl10"><h3>Benämning</h3><br>Uppfinningens benämning:</div>
    <div class="fl20">

    Munstycke och oftast ett mycket längre krångligt begrepp i en lång lång texststträng längre krångligt begrepp i en lång lång textsträng längre krängligt begrepp i en lång lång textsträng längre krånglig textsträng

    </div>

    <div class="clear"></div>

    <div class="fl10"><h3>Prioriteter</h3></div>
    <div class="fl20">

    <table border="0">
        <tr><td>Prioritet</td><td>Prioritetsdag</td><td>Prio. dok i ärende</td></tr>
        <tr><td>DK 0900231-1</td><td>2009-03-21</td><td>0800213-3</td></tr>
        <tr><td>EP 123234.3</td><td>2009-02-11</td><td>PCT/SE2002/000231</td></tr>
        <tr><td>SE PCT/SE2006/032131</td><td>2006-02-12</td><td></td></tr>
        </table>

    </div></div>

    <div class="clear"></div>

    <div class="fl10"><h3>Deposition mikroorganismer</h3></div>
    <div class="fl20">

    <table border="0">
        <tr><td>Depositionsmyndighet</td><td>Depositionsdatum</td><td>Depositionsnummer</td><td>Endast utlämning till expert</td></tr>
        <tr><td>Smittskyddsinstitutet</td><td>2009-03-21</td><td>11123</td><td>Nej</td></tr>

        </table>

    </div>

    <div class="clear"></div>

    <div class="fl10"><h3>Handläggare</h3></div>
    <div class="fl20">

    Markus Stålö, MSTÅ

    </div>

    <div class="clear"></div>

    <div class="fl10"><h3>Resultat</h3></div>
    <div class="fl20">

    <table border="0">
        <tr><td>c o Andersson</td><td>Telefon</td><td>0707532637</td></tr>
        <tr><td>Angeredsgatan 12 B, 3 tr</td><td>Fax</td><td>7551444</td></tr>
        <tr><td>234 56 Angegerdet</td><td>E-post</td><td>0707532637</td></tr>
        <tr><td>Sverige</td><td>Referens</td><td></td></tr>
        </table>

    </div>

</div><!-- indag -->

</div>

</div>
</div>
</form>
</body>
</html>


*  {font-family:arial;}

.avnamn{ 
                color: #90002b; 
                font-size: 140%; 
                display: inline; 
                vertical-align: 3%; 
                margin-left: 1%;
                }

.b{border:1px solid #000;}

.readonly{background-color: #CCC;}

.Webdings{
    font-family: Webdings;
    }

ul{margin-top: 0px}

.mt3{margin-top:-3px;}
.mt5p{margin-top:5px;}

.fontS80 {font-size: 80%;} 
a:link{color:#000; text-decoration:none; }
a:visited{color:#000; text-decoration:none; }
a:hover{color:#000; text-decoration:none; }
a:active{color:#000; text-decoration:none; }

.fontS75 {font-size: 75%;} 

.link{color: #003366;
    text-decoration: underline;
    cursor: pointer;
    font-weight: bold;}

.link_sm{color: #003366;
    text-decoration: underline;
    cursor: pointer;}

.link_sm{font-size: 70%;cursor: pointer;}

.small{font-size: 75%;}

.smallg{font-size: 75%;
color: #555;}

.ssmall{
    font-size: 65%;
    font-weight: bold;
    color: #555;
}
.small60{font-size: 60%;}
.small50{
    font-size: 50%;
    color: #333;
}
.smallb{font-size: 85%;}
table{display:inline;}

h1{font-size: 130%;display:inline;}
h2{font-size: 100%;display:inline;}
h3{
    font-size: 80%;
    display:inline;
    font-family: "Arial Unicode MS", Arial, Helvetica, sans-serif;
}
h4{font-size: 70%;display:inline;}
h5{
    font-size: 80%;
    display:inline;
    font-family: "Arial Unicode MS", Arial, Helvetica, sans-serif;
}

.hthin{
    font-size: 125%;
}

.th {text-align: left;}

td, th{font-size: 75%;
    vertical-align: text-top;}
.td_link{cursor: pointer;}
.td40{height:40px;}
.td60{height:60px;}



.thkant{
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    font-size: 70%;
        text-align: left;
}

.labb{F0F0E3; c1c1b3 }

.bb{border-bottom: 1px solid #000;}
.bbV{border-bottom: 1px solid #FFF;}
.TB_nbA {background-color:#CCC;}
.TB_bt, .TB_nb, .TB_db, .TB_bb {background-color:#efefdc;}

.hk {background-color:#d9ddb3;}

.hknot {background-color:#f9faf2;}
/*<!--F8F8F1-->*/
.TB_bt{border-top: 1px solid #FFF;}
.TB_bt5{border-top: 5px solid #FFF;}
.TB_bb{border-bottom: 1px solid #999;}
.TB_bb2{border-bottom: 2px solid #c1c1b3;}
.TB_db{border-bottom: 1px solid #000; border-top: 1px solid #000;}
.TB_tb{border-top: 2px solid #efefdc;}

.TB_bo{border: 2px solid #efefdc;}
.TB_bo_hk{border-top: 1px solid #efefdc;}


.TB_bo2{border: 1px solid #efefdc;}

.TB_bo2B{
border-top: 2px solid #c1c1b3;
border-left: 3px solid #efefdc;
border-right: 3px solid #efefdc;
border-bottom: 2px solid #c1c1b3;
}

.TD_bo{
    border-right: 1px solid #c1c1b3;
    width: 9%;
    font-size: 70%;
    text-align: center;
}

.TD_bo2{

    border-right: 0;
    width: 9%;
    font-size: 70%;
    text-align: center;
}

.ytb{
    border-left:3px solid #efefdc;
    border-right:3px solid #efefdc;
}

.datum {
    font-size: 70%;
    padding-right: 5px;
    vertical-align: text-top;} 
.sub {background:#EAEAEA;}
.sub_meny, .sub_meny_r, .sub_meny_active, .sub_meny_sm{
    font-size: 70%;
    padding-left: 20px;
    padding-right: 20px;
    vertical-align: text-top;}

.sub_meny_sm {
    font-size: 60%;
    vertical-align: middle;
    padding-left: 10px;
    padding-right: 10px;
}   

.sub_meny_r{
    float:right;
    font-size: 70%;
    padding-left: 8px;
    padding-right: 8px;}

.sub_meny_rm{margin-top:4px;}
.sub_meny_active{font-weight: bold;}

.flikkant1 {
    background-image: url(../images/fl1k.jpg);
    background-position: center;
    z-index: -1;}

.inl_namn{
    font-weight: bold;
    font-size: 70%;
    color: Black;
    text-decoration: none;}

.th{text-align: left;}
.tr{text-align: right;}

.g1{
    background-color: #FFF;
    line-height: 20px;
}

.g2{
    background-color: #EEE;
    line-height: 20px;
}

.g3{
    background-color: #DCDCDC;
    line-height: 20px;
    font-weight: bold;
    font-size: 100%;
}
.g4{
    background-color: #CCC;
    line-height: 20px;
}

.popup{
    border-color: #000; 
    border-style: groove; 
    border-width: 2px; 
    padding: 0px; 
    background-color: #FFF;
    font-size: 70%;
}

.popupN{
    background-color: #F0F0E3;
    color: #000;
    width: 100%;
    display: inline;
    font-weight: bold;
    height: auto;
    padding: 2px;
    border-bottom: 1px solid #000;
}
.pin{padding: 6px;}

.fl10, .fl20, .fl30, .fl40, .fl50, .fl60, .fl70, .fl80, .fl90, .fl100 {
    padding-bottom:4px;color: #000000;
}

.over{
    background-color: #EFEFDC;
    line-height: 20px;
}

.half{
line-height:50%;
}

.quarter{
line-height:25%;
}

.lh10{
line-height:10%;
}

.checkmargin {margin-right: 25px;}  
.checkmarginL {margin-left: 25px;}  

.pusher {padding-left: 15px;"}
.pusherR {margin-right: 40px;"}

.rand3{background-color: #FFF; line-height: 3px;}
.rand1{background-color: #FFF; line-height: 1px;}

.whiteborder {     color: #ffffff;      border: 4px solid #ffffff;      padding: 10px;      margin: 10px; }
#details { width: 580; color: #ffffff; }
.column1 {     color: #000000; margin: 0;      padding: 0;     width: 500px;     border:0;     float: left; }
.column2 {     color: #000000;margin: 0;      padding: 0;     border:0;     width: 80px;     float: right; }

.f200 {
    color: #000000;
}

.f210 {
    color: #000000;float: left;
}

body
{
background-color:#eeefdf;
}


.form-bg {
  background: #eeefdf;
  width:1000px;
  overflow:hidden;
}

.data-bar {
  border-bottom:1px solid #fbfbf7;
  display:inline-block;
  padding:10px 10px;
}

.left {
float:left;
width:200px;

}

.right {
float:right;
width:700px;
}

.data-box {
width:650px;
height:100px;
border:1px solid #cbcbcb;
}
#table td { 
margin:120px; 
}

Can you tell me how I should do it? Any other suggestion how I can make my result look more like the specification?

Thank you

Answer by Jules

JulesJules

you can solve it with floating elements like this:

<div style="float:left;width:200px">
    <span>Name</span>
</div>
<div style="float:left">
   <ul style="clear:both">
     <li style="list-style:none">
      <p style="float:left;width:200px;">c o Andersson</p>
      <p style="float:left;width:200px;"> Telefon </p>
      <p style="float:left;width:200px;"> 123456 </p>
     </li>
     <li style="clear:both; list-style:none">
       <p style="float:left;width:200px;">Angeredsgatan</p>
       <p style="float:left;width:200px;">Fax</p>
       <p style="float:left;width:200px;">7551444</p>
     </li>
  </ul>


</div>
    <div style="clear:both;float:left;width:200px">
        <span>name</span>
    </div>
    <div  style="float:left;">
     <span>Munstycke och oftast ett mycket längre krångligt begrepp i en lång lång texststträng längre krångligt begrepp i en lång lång textsträng längre krängligt begrepp i en lång lång textsträng längre krånglig textsträng
      </span>
    </div>

Answer by Starx

StarxStarx

colspan is a table feature. It is not available for divs or any other element except table.

Avoid yourself the trouble for looking for one. Becaue, even if you found one, it will be very buggy and simply not worthy to be called a solution.

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!