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!

Threaded | Flat

I have one answer so far.

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.

What's actually going on here is that you've put a top: 320 px on #primary to offset it from the absolutely positioned #header. This is mucking up the way the page is drawing elements and none of #primary's parent elements are extending down to enclose it fully. So #tertiary is being drawn part way up the page.

If you must position the header absolutely not relatively, then put that offset and the relative positioning on #content, so #primary can push #content down all the way to enclose it, and #tertiary, the thing your wayward elements are in, will display below #primary.

Will check back later today and see if any more mysteries remain to be solved. I love debugging, it's a sickness.

In the main entry view, how can I get usernames to display reliably under the userpic?

.entry-poster{float:right;clear:right;margin-left:.7em;margin-right:.3em;margin-bottom:.3em;}/*---  sets username position*/
.userpic a {border:0;}/* makes more room by removing possibly unwanted user icon border-bottom */

Things in the fluid layout...the bulleted list on the tags page isn't indented.

That's because you have an unclosed, empty statement for the tags container in your CSS:

.tags-container ul {

Change that to .tags-container ul {}

Or just get rid of that line since you're not using it.

Use this for multi-level indents:

.tags-container .tags_multilevel li li {margin-left:30px!important;}/* specifying ".tags-container .tags_multilevel" ensures sidebar tags won't be affected by this code */

I'm posting this without looking through all your CSS for possible adjustments because I have to shut down for the night very soon (but I may or may not post more replies before doing so), but I'll keep coming back to post whatever answers I can rustle up.

Edited (added/removed some html) 2012-02-20 04:45 (UTC)

Things in the fluid layout...Information in the entries on the main page is all squished together

For title overlapping with date/time, try this:

div.entry {line-height:1.6; }/* unsquishes text within entry containers */
h3.entry-title {margin-bottom: 1em!important; }/* you can also remove all padding from ".entry-title a" in your existing CSS to stop too-low border-bottom and too much left-indent on entry title from occurring */

For tags overlapping with entry tools, try this:

.tag ul {display: inline-block;margin-bottom:1em;/* current "inline" setting on this element makes setting white space around it impossible */}

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

Do you mean on this page? I can't puzzle out code until I know what page I'm on, no pun intended. :)

Also, I'll be away from the computer until possibly tomorrow, but I'll swing around again to see how things are coming along...

Layout help, fixed & fluid (Tabula Rasa)

no subject

(no subject)

(no subject)

(no subject)

(no subject)

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

(no subject)

(no subject)

(no subject)

(no subject)

(no subject)

Some answers...

Re: Some answers...

Re: Some answers...

Some more answers...

Re: Some more answers...

Question about:

Re: Question about:

Re: Question about:

Re: Question about:

Re: Question about:

Re: Question about:

So it's DW, not our email programs, it seems...

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

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

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