html - display table-cell 50% width not working -


i'm trying create nicely formatted form using display: table, ran bit of problem , can't seem work out.

here's code:

.table-container {    width: 100%;    margin: 10px auto;    display: table;    border-collapse: collapse;    outline: 1px solid black;  }  .form-row {    display: table-row;    border: 1px solid #393939;    width: 100%;    float: left;    border-bottom: 1px solid #393939;    border-collapse: collapse;  }  .header {    background-color: yellow;  }  .twenty {    width: 20%;  }  .twentyfive {    width: 25%;  }  .thirty {    width: 33%;  }  .thirty:last-child {    width: 34%;  }  .fourty {    width: 40%;  }  .fifty {    width: 50%;  }  .sixty {    width: 60%;  }  .seventy {    width: 70%;  }  .cell {    display: table-cell;    padding: 10px 20px;    border-right: 1px solid #393939;    vertical-align: middle;    border-collapse: collapse;  }  .first {    border-left: 1px solid #393939;  }
<form>    <div class="table-container">      <span class="form-row header">date solicitant</span>      <span class="form-row">  		<span class="cell fifty first"><input type="text" placeholder="nume" id="nume" name="nume" /></span>          <span class="cell fifty last"><input type="text" placeholder="prenume" id="prenume" name="prenume" /></span>      </span>      <span class="form-row">  		<span class="cell twentyfive first">tip act de identitate<br /><input type="radio" name="tip-act" value="bi">bi <input type="radio" name="tip-act" value="ci">ci <input type="radio" name="tip-act" value="pasaport">pasaport</span>           <span class="cell twentyfive"><input type="text" name="serie-act" id="serie-act" placeholder="serie" style="width: 25%";/> <input type="text" name="numar-act" id="numar-act" placeholder="numar" /></span>          <span class="cell twentyfive"><input type="text" name="eliberat" id="eliberat" placeholder="eliberat de" /></span>          <span class="cell twentyfive last"><input type="date" name="eliberat-data" id="eliberat-data" placeholder="la data de (zz/ll/aaaa)" /></span>      </span>      <span class="form-row">    		<span class="cell thirty first"><input type="text" name="cnp" id="cnp" placeholder="cod numeric personal" /></span>          <span class="cell thirty"><input type="text" name="loc-nastere" id="loc-nastere" placeholder="locul nasterii" /></span>          <span class="cell thirty">starea civila:<br /><input type="radio" name="stare-civila" value="casatorit(a)">casatorit(a) <input type="radio" name="stare-civila" value="necasatorit(a)">necasatorit(a) <input type="radio" name="stare-civila" value="divortat(a)">divortat(a) <input type="radio" name="stare-civila" value="vaduv(a)">vaduv(a) </span>       </span>      </div>  </form>

my problem that, although 2nd , 3rd rows displayed ok, cells taking entire row space, on 1st row, cells take small part of row. it's simple thing i'm overlooking, i've been trying solve while , fresh pair of eyes help.

thanks in advance!

the problem have float in class .form-row. need have property in each cell, , add class box-sizing: border-box. thus, cell class have following css:

.cell {   display: table-cell;   padding: 10px 20px;   border-right: 1px solid #393939;   vertical-align: middle;   border-collapse: collapse;   float:left;   box-sizing:border-box; }

jsfiddle here: http://jsfiddle.net/7m879c5l/


Comments

Post a Comment

Popular posts from this blog

jquery - How do you format the date used in the popover widget title of FullCalendar? -

Image
in fullcalendar, how format date used in popover widget title when clicking '+n more'? code: <div class="fc-popover fc-more-popover"> <div class="fc-header fc-widget-header"> <span class="fc-close fc-icon fc-icon-x"></span> <span class="fc-title">tuesday, april 7</span> ... </div> ... </div> you use daypopoverformat that. determines date format of title of popover created eventlimitclick option. must date formatting string. default value "dddd, mmmm d" english , "ll" other languages.
Read more

asp.net mvc - SSO between MVCForum and Umbraco7 -

i need integrate sso between mvcforum (forum of company) , umbraco7 (manages cms company). however struggling shared authentication work. tried several ways suggested on other threads still not running expected. here did: 1. in mvcforum (forum.mywebsite.com) 1.1. machine key in web.xml: <machinekey validationkey="the same key umbraco7" decryptionkey="the same key umbraco7" validation="sha1" decryption="aes" /> 1.2. authenticate forms in web.xml <forms name="my-sso-auth" protection="all" path="/" timeout="43200" domain="forum.mywebsite.com" loginurl="/members/logon" enablecrossappredirects="true" /> 2. in umbraco7 (news.mywebsite.com) 2.1. machine key in web.xml: <machinekey validationkey="the same key mvcforum" decryptionkey="the same key mvcforum" validation="sha1" decryption="aes" /> 2.2. a...
Read more

Python Tkinter keyboard using bind -

i have problem using bind option can click button in keyboard, , call function once key pressed. tried taking other codes have similar purpose , saw i'm doing pretty same, though still have problem must've missed. thankful if me this. here's code: # -*- coding: utf-8 -*- #imports tkinter import * pil import imagetk, image import time import tkmessagebox #===========================================================================================================================================# #tkinter class class app(frame): def __init__(self, master=none): frame.__init__(self, master) self.pack() #===========================================================================================================================================# #game pieces classes class board: def __init__(self, rows = 7, columns = 6, picture_height = none, picture_width = none): self.rows = rows self.columns = columns self.picture ...
Read more