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

Huh. Looks like overflow:hidden snuck back into the code.

With overflow:hidden turned on, the bottom of #secondary gets cut off for me on every page where #primary is too short. That includes the archive page for the year 2012, although not for 2011. It also includes the archive page for any not-too-active month.

With overflow:hidden deleted (which is how it is now), there is somehow extra space on the right. At any resolution, there's an extra 140px into which the DW navigation strip does not extend, and which compels there to be a horizontal scrollbar.

The question about making #primary and #secondary match in height is about the fluid version of the layout -- trying to get it to match more closely the look of the fixed version, where the background itself extends to the bottom of the page so the divs don't have to.

I was trying to edit again when you replied...when I said, "Setting a mi(n)-width on a main body element of no more than 730-740px" I actually meant max-width...I always get dyslexia writing that out, sorry. Also, With overflow:hidden turned on, the bottom of #secondary gets cut off for me on every page where #primary is too short wasn't happening for me on any page views I checked except for Archive by month, but I have to admit I wasn't exhaustive in my search for that problem, so I might have missed something else (or a bunch of something elses). I'll have to add #canvas{overflow:hidden;} back in and look again, but I'm also out of time so I probably won't have an answer until maybe tomorrow night or later (someone called in sick so I actually have to be back to work soon, and I probably won't get online again until much later).

Edited (html/typo) 2012-02-23 05:44 (UTC)

In the meantime (after taking one last look for tonight) I have to concur with

facetofcathy that setting a max-width on body might help by killing that scrollbar you've got on all resolutions now, at least until you find a more flexible answer. You can set a max-width of up to 1285px (I tested it at that width on a 1440 x 900 screen) with no horizontal scrollbars.

The width of the header image is 1010px, and I'd rather not artificially cut it off.

Setting a value in max-width seems to kill the horizontal scrollbar as long as the width of the window is less than that value + 140px. Any less than that, and it starts reappearing. (My screen resolution is much wider than that, but I don't keep my browser windows at fullscreen. About 1000px wide is the size that feels natural to me, and the layout reflects that.)

Layout help, fixed & fluid (Tabula Rasa)

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

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

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

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