summaryrefslogtreecommitdiff
path: root/css/2column.css
diff options
context:
space:
mode:
authorNathan Kinkade <nath@nkinka.de>2008-02-03 23:23:24 +0000
committerNathan Kinkade <nath@nkinka.de>2008-02-03 23:23:24 +0000
commitd895b852a6e160496ffc760d46d3719a3d62ff86 (patch)
tree52230bb04148197e8312e09b5c5273417e7a3be9 /css/2column.css
Initial checkin of nutridb.org and basic subversion directory structure
Diffstat (limited to 'css/2column.css')
-rw-r--r--css/2column.css93
1 files changed, 93 insertions, 0 deletions
diff --git a/css/2column.css b/css/2column.css
new file mode 100644
index 0000000..fafa314
--- /dev/null
+++ b/css/2column.css
@@ -0,0 +1,93 @@
+/*
+http://www.positioniseverything.net/articles/onetruelayout/example/equalheightopera8fix
+2 COLUMN LIQUID LAYOUT
+*/
+
+#middleColumn {
+ float: left;
+ width: 85%;
+}
+
+* html #middleColumn {
+ display: inline;
+}
+
+#rightColumn {
+ float: left;
+ width: 15%;
+ background-color: #cccccc;
+}
+
+/* Start Mac IE5 filter \*/
+#middleColumn, #rightColumn {
+ padding-bottom: 32767px;
+ margin-bottom: -32767px;
+}
+
+@media all and (min-width: 0px) {
+ #middleColumn, #rightColumn {
+ padding-bottom: 0;
+ margin-bottom: 0;
+ }
+ #middleColumn:before, #rightColumn:before {
+ display: block;
+ background: inherit;
+ padding-top: 32767px;
+ margin-bottom: -32767px;
+ height: 0;
+ }
+}
+/* End Mac IE5 filter */
+
+#columnContainer {
+ /* This hides the excess padding in non-IE browsers */
+ overflow: hidden;
+ margin-bottom: 3px;
+}
+
+/* we need this for IE 5.01 - otherwise the columnContainer does not expand to the
+necessary height (unless fixed, this problem becomes even more acute
+weirdness as the method is enhanced */
+#columnContainer {
+ /* Normally a Holly-style hack height: 1% would suffice but that causes
+ IE 5.01 to completely collapse the columnContainer - instead we float it */
+ float: left;
+ /* NB. possibly only IE 5.01 needs to get this float value - otherwise 5.5 sometimes
+ (I saw it happen many moons ago) makes the width of columnContainer too small
+ the float: none with the comment is ignored by 5.01,
+ 5.5 and above see it and carry on about their business
+ It's probably fine to just remove it, but it's left here
+ just in case that many moons ago problem rears its head again */
+ float/**/: none;
+}
+
+/* begin easy clearing */
+#columnContainer:after {
+ display: block;
+ height: 0;
+ clear: both;
+ visibility: hidden;
+}
+
+#columnContainer {
+ display: inline-block;
+}
+
+/*\*/
+#columnContainer {
+ display: block;
+}
+/* end easy clearing */
+
+#footer {
+ clear: both;
+}
+
+/* Safari needs this - otherwise the ghost overflow, though painted
+correctly obscures links and form elements that by rights should be above it.
+An unintended side-effect is that it cause such elements to vanish in IE 5.01
+and 5.5, hence the child selector hack */
+* > #footer, * > form, * > #notes, * > .output {
+ position: relative;
+ z-index: 1000;
+}