style_system | Layout help, fixed & fluid (Tabula Rasa)

I'm working on two Tabula Rasa layouts -- one fixed, one fluid, with matching graphics -- and starting to hit the limit of what my understanding of CSS can handle. Help?

Here's the current state of the fixed-width layout, currently enabled at

punditfic:

/********************DO NOT REMOVE THIS********************
New York Skyline by sailorptah
Theme: Tabula Rasa
CSS inspiration: http://www.csszengarden.com/?cssfile=200/200.css
Image: http://commons.wikimedia.org/wiki/File:Upper_and_Middle_Manhattan.jpg
Layouts: http://sailorptah.dreamwidth.org/tag/layouts
*************************************************************/

/* Cleaned CSS: */

H1, H2, H3 {
    margin: .25em 0;
    padding: .25em 0;
}

img {
    border: none;
}

hr {
    display: none;
}
.entry-content hr,
.comment-content hr {
    display: block;
    margin: 1em 10%;
}

body {
	font-family:Arial, Helvetica, sans-serif;
	background:#0D1A21 url(http://i142.photobucket.com/albums/r102/sailorptah/layouts/nyc-body.png) repeat-y top left;
	font-size:0.8em;
	color:#fff;
	font-weight:normal;
	margin:0;
	padding:0;    
}

html body {
    margin-left: 0em;
    margin-right: 0em;
}

a { 
	color:#a9e0ff;
	border-bottom:#a9e0ff dotted 1px;
        text-decoration: none;
 }
a:visited { 
	color:#fff;
	font-weight:normal;
	border-bottom:#a9e0ff dotted 1px;
	text-decoration:none;
 }
a:hover, a:active { 
	color:#fff;
	border-bottom:#fff dotted 1px;
        text-decoration: none;
 }

q { font-style: italic; }

.one-column #content { float: none; }
.two-columns-left #content,
.three-columns-sides #content {
    border-left: 15em solid transparent;
}
.two-columns-right #content,
.three-columns-sides #content {

}
.three-columns-left #content {
    border-left: 30em solid transparent;
}
.three-columns-right #content {
    border-right: 30em solid transparent;
}
.column-right #content {
    min-width: 15em; /* prevents sidebar overlap of entry, when entry becomes narrower than sidebar */
}

#content-footer {
    height: 0;
    font-size: 0; /*to make IE happy*/
    clear: both;
}

#header, #footer {
    margin: 0;
    clear: both;
    padding: .5em;
}

#header {
	position:absolute;
	top:20;
	left:0;
	background:#0D1A21 url(http://i142.photobucket.com/albums/r102/sailorptah/layouts/nyc-header-2.png) no-repeat top left;
	height:343px;
	width:100%;
}

h1#title span {
    position: absolute;
    top: 30px;
    left: 500px;
    font: 50px "Copperplate Gothic Light";
    text-transform: uppercase;
}

h2#subtitle span {
    position: absolute;
    top: 80px;
    left: 500px;
    font: 20px bold "Arial Narrow";
}
h2#pagetitle span {
    position: absolute;
    top: 100px;
    left: 500px;
    font: 20px "Arial Narrow";
}

#primary {
	position:relative;
	text-align:justify;
	width:400px;
	top:320px;
	left:140px;
	z-index:4;
}

.one-column #primary { float: none; }

#primary > .inner:first-child {
    padding: 1em;
}

.one-column #secondary { width: auto; }

.two-columns-left #secondary,
.three-columns-sides #secondary {
    float: left;
    width: 15em;
    margin-left: -15em;
}
.two-columns-right #secondary {
	position:absolute;
	top:385px;
	width:200px;
	text-align:center;
	left:611px;
	font-size:0.85em;
	background:transparent;
}
.three-columns-left #secondary {
    float: left;
    width: 15em;
    margin-left: -30em;
}
.three-columns-right #secondary {
    float: right;
    width: 15em;
    margin-right: -15em;
}

#secondary > .inner:first-child {
    padding: 1em;
}

.one-column #tertiary { width: auto; }

.two-columns-left #tertiary,
.two-columns-right #tertiary {
    clear: both;
}
.two-columns-left #tertiary { margin-left: -15em; }
.two-columns-right #tertiary { margin-right: -15em; }
.two-columns-left #tertiary .module,
.two-columns-right #tertiary .module {
    float: left;
    width: 15em;
}
.three-columns-left #tertiary {
    float: left;
    width: 15em;
    margin-left: -15em;
}
.three-columns-right #tertiary {
    float: right;
    width: 15em;
    margin-right: -30em;
    margin-left: 15em; /* so that #tertiary won't overlay #secondary in IE7 */
}
.three-columns-sides #tertiary {
    float: right;
    width: 15em;
    margin-right: -15em;
}

#tertiary > .inner:first-child {
    padding: 1em;
}

.topnav, #footer {
display: none;
}

.bottomnav {
	margin-top: 10px; 
	font-size:0.85em;
	letter-spacing: -0.07em;
	font-size: 1.2em;
	text-transform: uppercase;
}

.navigation ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}
.navigation li {
    display: inline;
    padding: 0 .5em;
}
.noentries {
    padding: 0 .5em;
}

/* entries */

.entry {

}

.entry h3 {
   font: bold 18px "Copperplate Gothic Light";
}

.contents .userpic {
    background: transparent;
    float: right;
    padding: 5px;
    spacing: 5px;
}

.entry .entry-content {
   margin-top: 30px;
   margin-bottom: 30px;
}

/* To prevent overlapping when icon's on the left */
/* and list is the first thing in content */
.entry-content li,
.comment-content li {
    list-style-position: inside;
    }

.metadata ul {
    display: inline;
    list-style: none;
    margin-left: .5em;
    padding-left: 0;
}
.metadata li {
    margin-bottom: .5em;
}
.metadata.top-metadata ul {
    margin: 0;
}
.metadata.top-metadata {
    margin-bottom: 1em;
}

.tag ul {
    display: inline;
    list-style: none;
    margin-left: .5em;
    padding-left: 0;
}
.tag ul li {
    display: inline;
    padding: .25em;
} /* same for month view */

ul.entry-management-links {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}
ul.entry-management-links li {
    display: inline;
    padding: 0 .25em;
}

ul.entry-interaction-links {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
    text-align: right;
}

.entry-interaction-links a {  }

ul.entry-interaction-links li {
    display: inline;
    padding: 0 .25em;
}

/* comments */

.comment-wrapper {
    padding: .5em 0;
}

.comment-wrapper-odd .header {
   background: #0D1A21;
   padding: 5px;
}

.comment-content {
   margin-top: 10px;
   margin-bottom: 10px;
   min-height: 100px;
   }

.comment-wrapper-even .header {
   background: #294A5D;
   padding: 5px;
}

.comment-title h4 {
    font: bold 18px "Copperplate Gothic Light";
    margin: 0;
    padding: 0;
}

ul.comment-management-links {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
    text-align: right;
}
ul.comment-management-links li {
    display: inline;
    padding: 0 .25em;
}

ul.comment-interaction-links {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}
ul.comment-interaction-links li {
    display: inline;
    padding: 0 .25em;
}

textarea#commenttext {
    width: 100%; /* fix for FF form width glitch */
}

/* archive */

.month {

}

table.month {
    margin: 0 auto;
    border-collapse: collapse;
}
table.month td {
    height: 3.25em;
}
table.month td,
table.month th {
    border: 1px solid; /* ? */
    padding: 3px;
}
table.month td p {
    margin: 0;
    padding: 3px;
}

.month dl dt {
    font-weight: bold;
}
.month dl .time {
    padding-right: .5em;
}
.month dl h3 {
    display: inline;
    font-size: medium;
}
.page-month .month .entry-poster {
    margin-right: .5em;
}
.month dl .tag ul {
    margin-top: 0;
}

/* icons */

.sorting-options ul {
    list-style: none;
    margin-left: 0;
}

.sorting-options ul li {
    display: inline;
}

.keywords ul {
    display: inline;
    list-style: none;
    margin-left: .5em;
    padding-left: 0;
}

.keywords ul li {
    display: inline;
    padding: .25em;
}

/* modules */

.module h2 {
    font: bold 18px "Copperplate Gothic Light";    
}

.module-content ul {
    list-style: outside;
    margin-left: 1em;
    padding-left: 0;
}
.module-content li {
    margin: .5em 0;
    list-style-type: none;
}

ul.userlite-interaction-links.icon-links {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

ul.userlite-interaction-links.icon-links li {
    display: inline;
    padding: 0 .20em;
}

ul.userlite-interaction-links.text-links {
    text-align: left;
}

.module-calendar .module-content {
    text-align: center;
}

.one-column .module-calendar .module-content {
    text-align: left;
}

.module-calendar table {
    margin: 0 auto;
}

.one-column .module-calendar table {
    margin: 0;
}

.module-calendar td {
    padding: 1px;
}
.module-calendar td a {
    display: block;
    padding: 2px;
}

.search-box {
    margin: .2em auto;
}

/* wrap long content, particularly openid usernames */
.module-pagesummary .ljuser {
    white-space: normal !important;
}
.module-pagesummary .module-content {
    word-wrap: break-word;
}
.module-credit dt, .module-credit dd {
    display: inline;
    margin: 0;
    padding: 0;
}
.module-credit dt {
    font-weight: bold;
    margin-right: 0.5em;
}

.tags_cloud li, .module-tags_cloud li { display: inline;
    list-style-type: none; }

.module-syndicate .module-content {
    text-align: center;
}

.one-column .module-syndicate .module-content {
    text-align: left;
}

.module-time, .module-powered {
   width:200px;
   margin-left:631px;
   font-size:0.85em;
   clear:left;
}

And here's the fluid version, visible in action at

andthatstheword:

/*************DO NOT REMOVE THIS*************
New York Skyline (Fluid) by sailorptah
Theme: Tabula Rasa

CSS inspiration: http://visualwit.dreamwidth.org/28429.html
Image: http://commons.wikimedia.org/wiki/File:Upper_and_Middle_Manhattan.jpg
Layouts: http://sailorptah.dreamwidth.org/tag/layouts

********************************/

/*--- main ---*/

* {
	margin: 0px; 
	padding: 0px;
	}

BODY {
	font-family:Arial, Helvetica, sans-serif;
	background: #0E1920 url('http://i142.photobucket.com/albums/r102/sailorptah/layouts/city-bg.png');
	color: #fff;
	font-size: .8em;
	margin: 30px 0px 0px 0px;
	}

a { 
	color:#a9e0ff;
	border-bottom:#a9e0ff dotted 1px;
        text-decoration: none;
	}

a:visited { 
	color:#fff;
	font-weight:normal;
	border-bottom:#a9e0ff dotted 1px;
	text-decoration:none;
	}

a:hover, a:active { 
	color:#fff;
	border-bottom:#fff dotted 1px;
        text-decoration: none;
	}

blockquote {
	background-color: #0D1A21;
	padding: 8px; 
	margin: 15px 55px 15px 15px; 
	text-align: justify;
	}

.contents .userpic {
	background: transparent;
	float: right;
	padding: 5px;
	spacing: 5px;
	}

hr {
	display: none;
	}

#primary { 
	text-align:justify;
	background-image: url('http://i142.photobucket.com/albums/r102/sailorptah/layouts/city-modules.png')
	}

#secondary { 
	text-align:center;
	background-image: url('http://i142.photobucket.com/albums/r102/sailorptah/layouts/city-modules.png'); 
	background-color: #7eadc8;
	}

/*--- header ---*/

#header { 
	height: 306px;
	background:#0D1A21 url(http://i142.photobucket.com/albums/r102/sailorptah/layouts/city-nyc.png) repeat-y top left;
	margin-top: -20px;
	}

h1#title, h2#subtitle, h2#pagetitle {
	color: #fff;
	text-align: right;
	margin-right: 10%;
	}

h1#title {
	font: 50px "Copperplate Gothic Light";
	font-size: 3em;
	}

h2#subtitle { 
	font-size: 1.5em;
	font: 20px bold "Arial Narrow";
	}

h2#pagetitle { 
	font-size: 1.5em;
	font: 20px "Arial Narrow";
	}

/*--- sidebar options ---*/

.two-columns-left #primary {
	float: right;
	margin-right: 8%;
	margin-top: -2px;
	padding: 2%;
	width: 56%;
	}

.two-columns-left #secondary { 
	float: left; 
	width: 19%; 
	margin-left: 8%; 
	margin-top: -2px;
	padding: 1%;
	}

.two-columns-right #primary {
	float: left;
	margin-left: 8%;
	margin-top: -2px;
	padding: 2%;
	width: 56%;
	}

.two-columns-right #secondary { 
	float: right; 
	width: 19%; 
	margin-right: 8%; 
	margin-top: -2px;
	padding: 1%;
	}

.two-columns-right #tertiary, .two-colums.left #tertiary { 
	clear: both; 
	}

.two-columns-right #tertiary .module, .two-colums.left #tertiary .module { 
	float: left; 
	}

/*--- sidebar ---*/

.module { 	
	text-align: center;
	}

.module-content { 
	padding: 10px; 
	font-size: .85em;
	}

.module-content ul {
	list-style: outside;
	margin-left: 1em;
	padding-left: 0;
	}

.module-content li {
	margin: .5em 0;
	list-style-type: none;
	}

.module-active, .module-search, .module-cuttagcontrols, .module-userprofile, .module-customtext, .module-typelist, .module-tags_list, .module-pagesummary, .module-calendar, .module-syndicate { 
	}

.module-powered, .module-time { 
	font-size:0.85em;
	}

.module h2 {
	font: bold 1.5em "Copperplate Gothic Light";
	color: #fff; 
	text-align: center;
	}

ul.userlite-interaction-links.icon-links {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
	}

ul.userlite-interaction-links.icon-links li {
	display: inline;
	padding: 0 .20em;
	}

ul.userlite-interaction-links.text-links {
	text-align: left;
	}

div.manage-tags-link { 
	margin: 10px 0px 0px 0px;
	text-transform: uppercase; 
	text-align: right; 
	}

.module-calendar .module-content {
	text-align: center;
	}

.one-column .module-calendar .module-content {
	text-align: left;
	}

.module-calendar table {
	margin: 0 auto;
	}

.one-column .module-calendar table {
	margin: 0;
	}

.module-calendar td {
	padding: 1px;
	}

.module-calendar td a {
	display: block;
	padding: 2px;
	}

/* wrap long content, particularly openid usernames */
.module-pagesummary .ljuser {
	white-space: normal !important;
	}

.module-pagesummary .module-content {
	word-wrap: break-word;
	}

.module-credit dt, .module-credit dd {
	display: inline;
	margin: 0;
	padding: 0;
	}

.module-credit dt {
	font-weight: bold;
	margin-right: 0.5em;
	}

.tags_cloud li, .module-tags_cloud li { display: inline;
    list-style-type: none; }

.module-syndicate .module-content {
    text-align: center;
}

/*--- navigation (for entries) ---*/

.navigation { 
	color: #fff;  
	text-align: center; 
	padding: 5px; 
	margin: 0px 0px 0px 0px; 	
	letter-spacing: -0.07em;
	font-size: 1.2em;
	text-transform: uppercase;
	}

.topnav, #footer { 
	display: none; 	
	}

.bottomnav { 
	margin-top: 10px; 
	font-size:0.85em;
	}

.page-separator { 
	padding: 10px; 
	}

div.navigation ul { 
	display: inline; 
	}

div.navigation li { 
	display: inline; 
	list-style: none; 
	}

li.page-back, li.page-forward {
	display: inline; 
	list-style: none; 
	}

/*--- entries ---*/

div.entry { 
	margin: 0px 0px 15px 0px;
	}

div.entry-content { 
	padding: 10px; 
	min-height: 100px; 
	margin: 20px 0px 20px 0px;
	}

div.entry div.header { 
	padding: 5px 10px 5px 10px; 
	margin: 0px 0px -10px 0px; 
	margin-right: 0px; 
	text-align: left;
	font-weight: lighter;
	}

.entry h3 {
	font: bold 1.4em "Copperplate Gothic Light";
	}

.entry-title a { 
	padding: 3px 5px 5px 5px;
	color: #efefef; 
	}

.datetime {  
	font-size: .85em;
	color: #fff; 
	padding-bottom: 5px;
	}

.entry-poster, .comment-poster { 
	padding: 7px 5px 5px 5px;
	}

/*--- currents and tags ---*/

.metadata { 
	font-size: 0.7em; 
	padding: 10px 15px 5px 15px; 
	margin: 0px;  
	text-transform: uppercase; 
	margin-right: 0px; 
	}

.metadata ul {
	display: inline;
	list-style: none;
	margin-left: .5em;
	padding-left: 0;
	}

.metadata li {
	margin-bottom: .5em;
	}

.metadata.top-metadata ul {
	margin: 0;
	}

.metadata.top-metadata {
	margin-bottom: 1em;
	}

.tag ul {
	display: inline;
	list-style: none;
	margin-left: .5em;
	padding-left: 0;
	}

.tag ul li {
	display: inline;
	padding: .25em;
} /* same for month view */

ul.entry-management-links {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
	}

ul.entry-management-links li {
	display: inline;
	padding: 0 .25em;
	}

ul.entry-interaction-links {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
	text-align: right;
	}

.entry-interaction-links a {  }

ul.entry-interaction-links li {
	display: inline;
	padding: 0 .25em;
	}

.tags-container ul {

/*--- archive page ---*/

table.month {
	margin: 0 auto;
	border-collapse: collapse;
	}

table.month td {
	height: 3.25em;
	}

table.month td, table.month th {
	border: 1px solid; /* ? */
	padding: 3px;
	}

table.month td p {
	margin: 0;
	padding: 3px;
	}

.month dl dt {
	font-weight: bold;
	}

.month dl .time {
	padding-right: .5em;
	}

.month dl h3 {
	display: inline;
	font-size: medium;
	}

.page-month .month .entry-poster {
	margin-right: .5em;
	}

.month dl .tag ul {
	margin-top: 0;
	}

/*--- comments ---*/

.comment { 
	margin: 0px 0px 20px 0px;	
	}

.comment-content {
	margin-top: 10px;
	margin-bottom: 10px;
	min-height: 100px;
	}

.comment-wrapper {
	padding: .5em 0;
	}

.comment-wrapper-odd .header {
	background: #0D1A21;
	padding: 5px;
	}

.comment-wrapper-even .header {
	background: #294A5D;
	padding: 5px;
	}

.comment-title h4 {
	font: bold 18px "Copperplate Gothic Light";
	margin: 0;
	padding: 0;
	}

ul.comment-management-links {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
	text-align: right;
	}

ul.comment-management-links li {
	display: inline;
	list-style: none;
	padding: 0 .25em;
	}

ul.comment-interaction-links {
	display: inline;
	list-style: none;
	margin-left: 0;
	padding-left: 0;
	}

ul.comment-interaction-links li {
	display: inline;
	padding: 0 .25em;
	}

.multiform-checkbox {
	padding-top: 20px;
	}

Issues in the fixed-width layout:

~~When the page isn't tall enough, module-content and module-powered show up in the middle of the sidebar.~~ Avoided!

In the main entry view, how can I get usernames to display reliably under the userpic? The best I got (through messing with margins) was "it'll appear there, but entry text will overlap it." (Also a problem in the fluid version.) Solved in both!

New issue...when #primary is shorter than #secondary, the page only scrolls down as far as #primary.

Things in the fluid layout that I can't get to match the fixed-width layout:

~~On the calendar-by-month view, the entry information isn't indented with respect to the date.~~ Prettied up!

~~Similarly, the bulleted list on the tags page isn't indented.~~ Solved!

~~Information in the entries on the main page is all squished together (title overlapping with date/time, tags overlapping with entry tools).~~ Solved!

~~Everything to do with comment display just isn't happening. The tools won't display inline, there's no space around comment-content, the header has no background...~~ Solved!

Other issues with the fluid layout:

Can I make the #primary and #secondary divs extend to the bottom of the page (to extend the background) without covering the header?

Looks like I need to do something with module-content and module-powered here too. When the sidebar is on the left, they try to squeeze into the gap between #secondary and #primary. This isn't a problem when the sidebar is on the right (or at least, it hasn't been at my resolution). Solved!

Anyone who can point me in the right direction on any of these points would be greatly appreciated!

Flat | Top-Level Comments Only

IE old doesn't get it

Heh, why would this not surprise me? There's a reason my Quick Launch thingy includes stuff like:

So you have to be able to put a conditional style on it

But if by that you mean a conditional comment, yeah, I'd love to trick IE Old out in just that way with all my layouts, but DW/LJ strips out such possibilities by invalidating your entire style sheet for improper syntax if you include that code. You can't use backslashes, any non-UTF8 chars or any conditional comments. And of course, you can't link off-site to additional or even primary style sheets. Which might sound like a complaint on my part, but is actually one of the reasons I love coding for DW more than any other place (such as my own website or Wordpress, or whatever); you're so limited in what you can do here that you're forced to get really creative to make stuff work at all.

While I would enjoy the added flexibility of Moar Options, there's something to be said for having to work within such narrow confines, too.

And, crucially, some screen readers treat it as if it was a table, delivering the information as if it's tabular data. Which I don't think they should do.

Thanks for mentioning that because I had no idea. Assuming all display: table values have the same effect, that's bad news indeed. I began using display: inline-table after noticing Google uses that to set some elements
on results pages, and I found it comes in handy for coding forms....but...if it's going to hurt accessibility, then I need to find a better way, I guess.

Edited (more info) 2012-02-21 22:35 (UTC)

Layout help, fixed & fluid (Tabula Rasa)

Always a but (or in IE's case, yeah, a butt)...