> Forside > To-spaltet layout

HTML Guide

To-spaltet layout

Dette eksempel illustrerer, hvordan et to-kolonne design skabes.

Det vil typisk kunne benyttes for særligt korte felter, hvor felterne opstilles i spalter.

Layoutet opnås ved at tilføje class="floatleft" på felter i samme række, og dernæst adskille linjeskift eksplicit for linjerne.

Flerkolonne indhold





Markup for flerkolonne layout 
<form>
  <div class="fieldset">
    <fieldset>
      <legend><span>Flerkolonne indhold</span></legend>
      
      <label class="floatleft">Felt i første kolonne
      <span class="req">*</span><br/>
      <input type="text" class="short text" value=""/></label>

      <label class="floatleft">Felt i anden kolonne<br/>
      <input type="text" class="short text" value=""/></label>
      <br class="clearfix"/>

      <label class="floatleft">Select felt<span class="req">*</span><br/>
      <select id="select" name="select" class="short">
        <option value="val">vælg fra listen...</option>
      </select></label>

      <label class="floatleft">Felt ved siden af select
        <span class="req">*</span><br/>
        <input type="text" id="id" name="id" class="short text" value=""/>
      </label>
      <br class="clearfix"/>
      
      <label class="floatleft">Tilføj navn<br/>
        <input type="text" class="short text" value="skriv navn der skal tilføjes"/>
      </label>
      
      <label class="floatleft"><br/>
        <input type="button" class="button" value="Tilføj"/>
      </label>
      <br class="clearfix"/>

      <label>Extra felt der går på tværs<span class="req">*</span><br/>
      <input type="text" id="x" name="x" class="text" value=""/></label><br/>
    </fieldset>
  </div>
  <input type="submit" class="floatleft short button" name="save" id="save" value="Gem" />
  <input type="reset" value="Annuller" class="floatleft button" id="cancel" name="cancel" />
  <br class="clearfix" />
  <br />
</form>