Skip to content

Instantly share code, notes, and snippets.

@bradgignac

bradgignac/gist:3745836

Forked from tripngroove/gist:3718494
Created September 18, 2012 20:54
Show Gist options
  • Save bradgignac/3745836 to your computer and use it in GitHub Desktop.
Save bradgignac/3745836 to your computer and use it in GitHub Desktop.
Download ZIP
Fluid width popover labels
Raw
gistfile1.html
<html>
<head>
<style>
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding:0; margin:0; }
body, input, textarea, select,ul,li { font:13px/20px Arial, sans-serif; color:#333; }
.page { width:800px; margin:0 auto; padding:30px; }
.popover { border:1px solid #ccc; display:inline-block; padding:20px; box-shadow:2px 2px 10px rgba(0,0,0,0.25); }
.table { display:table; }
.row { display:table-row; }
.cell { display:table-cell; padding-bottom:20px; }
.cell:first-child { padding-right:20px; }
.row:last-child .cell { padding-bottom:0; }
</style>
</head>
<body>
<div class="page">
<div class="popover">
<div class="table">
<fieldset>
<legend>One Section</legend>
<div class="row">
<div class="cell"><label>Short Label:</label></div>
<div class="cell"><input type="text"></div>
</div>
<div class="row">
<div class="cell"><label>Long Label Alpha Beta Gamma Delta:</label></div>
<div class="cell">
<input type="checkbox"> Foo <br>
<input type="checkbox"> Bar <br>
<input type="checkbox"> Baz <br>
<input type="checkbox"> Qux
</div>
</div>
<div class="row">
<div class="cell"><label>Short Label:</label></div>
<div class="cell"><input type="text"></div>
</div>
</fieldset>
<fieldset>
<legend>One Section</legend>
<div class="row">
<div class="cell"><label>Short Label:</label></div>
<div class="cell"><input type="text"></div>
</div>
<div class="row">
<div class="cell"><label>Long Label Alpha Beta Gamma Delta Long Label Alpha Beta Gamma Delta Long Label Alpha Beta Gamma Delta Long Label Alpha Beta Gamma Delta:</label></div>
<div class="cell">
<input type="checkbox"> Foo <br>
<input type="checkbox"> Bar <br>
<input type="checkbox"> Baz <br>
<input type="checkbox"> Qux
</div>
</div>
<div class="row">
<div class="cell"><label>Short Label:</label></div>
<div class="cell"><input type="text"></div>
</div>
</fieldset>
</div><!--/.table-->
</div><!--/.popover-->
</div><!--/.page-->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment