WordPress.org

1. stmcgill
   Member
   Posted 3 years ago #

   Hi there

   I am using a 3 column layout on my site and it is working OK, but I would like to make it use the full width of the screen. The left and right columns need to be static widths (as specified in the code) and the middle column needs to be flexible and fill the centre column.

   I have tried for 2 hours to tinker with the code and to use 'auto' etc. for the middle column width, but it just takes up the whole width of the screen, sits below the left column ands put the right hand column below it.

   Is there an easy fix looking at the code below? My CSS skills are not exactly good...

   /*
   Theme Name: Revolution Blog Split
   Theme URL: http://www.revolutiontheme.com/themes/revolution-blog
   Description: Revolution Blog is a 3-column Widget-ready theme created for WordPress.
   Author: Brian Gardner
   Author URI: http://www.briangardner.com
   Version: 1.0

   The CSS, XHTML and design is released under GPL:
   http://www.opensource.org/licenses/gpl-license.php

   Changelog:
   v1.0 - 04.18.08
   First Release of Revolution Blog
   */

   body {
   background: #FFFFFF url(images/bg.gif) repeat-x;
   color: #202020;
   font-size: 12px;
   font-family: Arial, Tahoma, Verdana;
   margin: 0px auto 0px;
   padding: 0px;
   }

   #wrap {
   background: #FFFFFF;
   margin: 0px auto 0px;
   padding: 0px;
   }

   /************************************************
   * Hyperlinks *
   ************************************************/

   a, a:visited {
   color: #2255AA;
   text-decoration: none;
   }

   a:hover {
   color: #7DAE12;
   text-decoration: underline;
   }

   /************************************************
   * Header *
   ************************************************/

   #header {
   width: 960px;
   height: 110px;
   color: #FFFFFF;
   font-size: 16px;
   font-weight: normal;
   margin: 0px auto 0px;
   padding: 0px;
   overflow: hidden;
   }

   #header p {
   padding: 0px 0px 5px 0px;
   margin: 0px;
   line-height: 20px;
   }

   #header h1 {
   color: #FFFFFF;
   font-size: 36px;
   font-family: Times New Roman, Georgia, Trebuchet MS;
   font-weight: normal;
   margin: 0px;
   padding: 20px 0px 0px 0px;
   text-decoration: none;
   }

   #header h1 a, #header h1 a:visited {
   color: #FFFFFF;
   font-size: 36px;
   font-family: Times New Roman, Georgia, Trebuchet MS;
   font-weight: normal;
   margin: 0px;
   padding: 20px 0px 0px 0px;
   text-decoration: none;
   }

   #header h1 a:hover {
   color: #FFFFFF;
   text-decoration: none;
   }

   .headerleft {
   width: 350px;
   float: left;
   margin: 0px;
   padding: 0px;
   overflow: hidden;
   }

   .headerleft a img {
   border: none;
   margin: 0px;
   padding: 0px;
   }

   .headerright {
   width: 600px;
   float: right;
   margin: 0px;
   padding: 10px 0px 0px 0px;
   text-align: right;
   }

   .headerright a, .headerright a:visited {
   color: #FFFFFF;
   font-size: 11px;
   text-transform: uppercase;
   text-decoration: none;
   padding: 0px 0px 0px 3px;
   }

   .headerright a:hover {
   color: #FFFFFF;
   text-decoration: underline;
   }

   .headerright a img {
   border: none;
   margin: 0px 0px 3px 0px;
   padding: 0px;
   }

   /************************************************
   * Navbar *
   ************************************************/

   #navbar {
   background: #1A4E88;
   width: 960px;
   height: 30px;
   margin: 0px auto 0px;
   padding: 0px;
   overflow: hidden;
   }

   #navbarleft {
   width: 650px;
   float: left;
   margin: 0px;
   padding: 0px 0px 0px 0px;
   }

   #navbarright {
   width: 300px;
   float: right;
   margin: 0px;
   padding: 0px 0px 0px 0px;
   text-align: right;
   }

   #nav {
   margin: 0px;
   padding: 0px;
   list-style: none;
   }

   #nav ul {
   margin: 0px;
   padding: 0px;
   list-style: none;
   }

   #nav a {
   color: #FFFFFF;
   display: block;
   font-size: 11px;
   font-weight: bold;
   text-transform: uppercase;
   margin: 0px 15px 0px 0px;
   padding: 8px 10px 8px 10px;
   text-decoration: none;
   }

   #nav a:hover {
   background: #4A7EB8;
   color: #FFFFFF;
   display: block;
   text-decoration: none;
   margin: 0px 15px 0px 0px;
   padding: 8px 10px 8px 10px;
   }

   #nav li {
   float: left;
   margin: 0px;
   padding: 0px;
   }

   #nav li li {
   float: left;
   margin: 0px;
   padding: 0px;
   width: 140px;
   }

   #nav li li a, #nav li li a:link, #nav li li a:active, #nav li li a:visited {
   background: #4A7EB8;
   color: #FFFFFF;
   width: 140px;
   font-size: 10px;
   float: none;
   margin: 0px;
   padding: 8px 10px 8px 10px;
   border-left: 1px solid #FFFFFF;
   border-right: 1px solid #FFFFFF;
   border-bottom: 1px solid #FFFFFF;
   text-decoration: none;
   }

   #nav li li a:hover {
   background: #1A4E88;
   color: #FFFFFF;
   padding: 8px 10px 8px 10px;
   }

   #nav li ul {
   position: absolute;
   width: 10em;
   left: -999em;
   }

   #nav li:hover ul {
   left: auto;
   display: block;
   }

   #nav li:hover ul, #nav li.sfhover ul {
   left: auto;
   }

   /************************************************
   * Content *
   ************************************************/

   #content {
   width: 960px;
   margin: 0px auto 0px;
   padding: 20px 0px 0px 0px;
   }

   #content p {
   padding: 0px 0px 10px 0px;
   margin: 0px;
   line-height: 20px;
   }

   #content h1 {
   color: #2255AA;
   font-size: 24px;
   font-family: Times New Roman, Georgia, Trebuchet MS;
   font-weight: normal;
   margin: 0px;
   padding: 0px 0px 5px 0px;
   }

   #content h1 a {
   color: #2255AA;
   text-decoration: none;
   }

   #content h1 a:hover {
   color: #7DAE12;
   text-decoration: none;
   }

   #content h3 {
   color: #2255AA;
   font-size: 24px;
   font-family: Times New Roman, Georgia, Trebuchet MS;
   font-weight: normal;
   margin: 20px 0px 0px 0px;
   padding: 20px 0px 5px 0px;
   border-top: 1px dotted #999999;
   }

   #content p img {
   float: left;
   border: none;
   margin: 0px 10px 10px 0px;
   }

   #content img.wp-smiley {
   float: none;
   border: none;
   padding: 0px;
   margin: 0px;
   }

   #content img.wp-wink {
   float: none;
   border: none;
   padding: 0px;
   margin: 0px;
   }

   #contentleft {
   float: left;
   width: 500px;
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 20px 20px;
   }

   #contentleft ol {
   margin: 0px 0px 0px 20px;
   padding: 0px 0px 10px 0px;
   }

   #contentleft ol li {
   margin: 0px 0px 0px 20px;
   padding: 0px 0px 5px 0px;
   }

   #contentleft ul {
   list-style-type: square;
   margin: 0px 0px 0px 20px;
   padding: 0px 0px 10px 0px;
   }

   #contentleft ul li {
   list-style-type: square;
   margin: 0px 0px 0px 20px;
   padding: 0px 0px 5px 0px;
   }

   .date {
   font-size: 11px;
   font-weight: bold;
   padding: 0px;
   margin: 0px 0px 15px 0px;
   }

   .postmeta {
   width: 500px;
   font-size: 11px;
   font-weight: bold;
   padding: 0px 0px 10px 0px;
   margin: 0px 0px 20px 0px;
   border-bottom: 1px dotted #999999;
   }

   blockquote{
   font-style: italic;
   margin: 0px 25px 15px 25px;
   padding: 0px 25px 0px 10px;
   border-left: 2px solid #4A7EB8;
   }

   #content blockquote p{
   margin: 0px 0px 0px 0px;
   padding: 10px 0px 10px 0px;
   }

   /************************************************
   * Left Sidebar *
   ************************************************/

   #l_sidebar {
   float: left;
   width: 160px;
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 20px 0px;
   line-height: 20px;
   }

   #l_sidebar h2 {
   background: #FFFFFF url(images/headline_left.gif);
   color: #FFFFFF;
   font-size: 11px;
   font-family: Arial, Tahoma, Verdana;
   font-weight: bold;
   text-transform: uppercase;
   margin: 0px 0px 5px 0px;
   padding: 3px 0px 3px 10px;
   }

   #l_sidebar ul {
   list-style-type: none;
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
   }

   #l_sidebar p {
   padding: 0px 0px 0px 0px;
   margin: 0px;
   line-height: 20px;
   }

   /************************************************
   * Right Sidebar *
   ************************************************/

   #r_sidebar {
   float: right;
   width: 200px;
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 20px 0px;
   line-height: 20px;
   }

   #r_sidebar h2 {
   background: #FFFFFF url(images/headline_right.gif);
   color: #FFFFFF;
   font-size: 11px;
   font-family: Arial, Tahoma, Verdana;
   font-weight: bold;
   text-transform: uppercase;
   margin: 0px 0px 5px 0px;
   padding: 3px 0px 3px 10px;
   }

   #r_sidebar ul {
   list-style-type: none;
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
   }

   #r_sidebar p {
   padding: 0px 0px 0px 0px;
   margin: 0px;
   line-height: 20px;
   }

   /************************************************
   * Widgets *
   ************************************************/

   .textwidget {
   margin: 0px 0px 0px 0px;
   padding: 3px 0px 8px 0px;
   }

   #recent-posts ul {
   list-style-type: none;
   margin: 0px 0px 10px 0px;
   padding: 0px 0px 0px 0px;
   }

   #recent-posts ul li {
   background: #FFFFFF url(images/icon_recent.gif) no-repeat top left;
   padding: 0px 0px 0px 18px;
   margin: 0px 0px 0px 0px;
   }

   #recent-comments ul {
   list-style-type: none;
   margin: 0px 0px 10px 0px;
   padding: 0px 0px 0px 0px;
   }

   #recent-comments ul li {
   background: #FFFFFF url(images/icon_comments.gif) no-repeat top left;
   padding: 0px 0px 0px 18px;
   margin: 0px 0px 0px 0px;
   }

   #categories-1 ul {
   list-style-type: none;
   margin: 0px 0px 10px 0px;
   padding: 0px 0px 0px 0px;
   }

   #categories-1 ul ul {
   list-style-type: none;
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
   }

   #categories-1 ul li {
   background: #FFFFFF url(images/icon_categories.gif) no-repeat top left;
   padding: 0px 0px 0px 18px;
   margin: 0px 0px 0px 0px;
   }

   #archives ul {
   list-style-type: none;
   margin: 0px 0px 10px 0px;
   padding: 0px 0px 0px 0px;
   }

   #archives ul li {
   background: #FFFFFF url(images/icon_archives.gif) no-repeat top left;
   padding: 0px 0px 0px 18px;
   margin: 0px 0px 0px 0px;
   }

   #pages ul {
   list-style-type: none;
   margin: 0px 0px 10px 0px;
   padding: 0px 0px 0px 0px;
   }

   #pages ul ul {
   list-style-type: none;
   margin: 0px 0px 10px 0px;
   padding: 0px 0px 0px 0px;
   }

   #pages ul li {
   background: #FFFFFF url(images/icon_meta.gif) no-repeat top left;
   padding: 0px 0px 0px 18px;
   margin: 0px 0px 0px 0px;
   }

   #links ul {
   list-style-type: none;
   margin: 0px 0px 10px 0px;
   padding: 0px 0px 0px 0px;
   }

   #links ul ul {
   list-style-type: none;
   margin: 0px 0px 10px 0px;
   padding: 0px 0px 0px 0px;
   }

   #links ul li {
   background: #FFFFFF url(images/icon_links.gif) no-repeat top left;
   padding: 0px 0px 0px 18px;
   margin: 0px 0px 0px 0px;
   }

   #meta ul {
   list-style-type: none;
   margin: 0px 0px 10px 0px;
   padding: 0px 0px 0px 0px;
   }

   #meta ul li {
   background: #FFFFFF url(images/icon_meta.gif) no-repeat top left;
   padding: 0px 0px 0px 18px;
   margin: 0px 0px 0px 0px;
   }

   #text-1 ul {
   list-style-type: none;
   margin: 0px 0px 10px 0px;
   padding: 0px 0px 0px 0px;
   }

   #text-1 ul li {
   padding: 0px 0px 0px 0px;
   margin: 0px 0px 0px 0px;
   }

   /************************************************
   * Footer Background *
   ************************************************/

   #footerbg {
   background: #1A4E88;
   }

   /************************************************
   * Footer *
   ************************************************/

   #footer {
   width: 960px;
   height: 30px;
   color: #FFFFFF;
   margin: 0px auto 0px;
   padding: 0px;
   }

   #footer p {
   color: #FFFFFF;
   font-size: 10px;
   font-weight: normal;
   text-transform: uppercase;
   margin: 0px;
   padding: 0px;
   }

   #footer a {
   color: #FFFFFF;
   text-decoration: none;
   }

   #footer a img {
   border: none;
   margin: 0px;
   padding: 0px;
   }

   #footer a:hover {
   color: #FFFFFF;
   text-decoration: underline;
   }

   .footerleft {
   width: 700px;
   float: left;
   margin: 0px;
   padding: 8px 0px 8px 0px;
   }

   .footerright {
   width: 250px;
   float: right;
   margin: 0px;
   padding: 8px 0px 8px 0px;
   text-align: right;
   }

   /************************************************
   * Search Form *
   ************************************************/

   #searchdiv {
   margin: 0px;
   padding: 0px;
   }

   #searchform {
   margin: 0px;
   padding: 4px 0px 0px 0px;
   }

   #s {
   background: #FFFFFF;
   width: 210px;
   color: #333333;
   font-size: 11px;
   font-family: Arial, Tahoma, Verdana;
   padding: 3px;
   margin: 0px 0px 0px 0px;
   border-top: 1px solid #666666;
   border-right: 1px solid #666666;
   border-left: 1px solid #999999;
   border-bottom: 1px solid #999999;
   }

   #sbutt {
   background: #4A7EB8;
   color: #FFFFFF;
   font-size: 11px;
   font-family: Arial, Tahoma, Verdana;
   padding: 1px;
   margin: 0px 0px 0px 3px;
   border: 1px solid #FFFFFF;
   }

   /************************************************
   * Comments *
   ************************************************/

   #commentblock {
   width: 460px;
   background: #E8E8E8;
   float: left;
   padding: 20px 20px 10px 20px;
   margin: 10px 0px 0px 0px;
   border-top: 2px solid #1A4E88;
   border-bottom: 1px solid #1A4E88;
   }

   #commentblock ol {
   list-style-type: square;
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 10px 0px;
   }

   .commentdate {
   font-size: 12px;
   padding-left: 0px;
   }

   #commentlist li p {
   margin-bottom: 8px;
   line-height: 20px;
   padding: 0px;
   }

   .commentname {
   color: #333333;
   margin: 0px;
   padding: 5px 5px 5px 0px;
   }

   .commentinfo{
   clear: both;
   }

   .commenttext {
   clear: both;
   margin: 3px 0px 10px 0px;
   padding: 20px 10px 5px 10px;
   width: 420px;
   background: #FFFFFF url(images/comment.gif) no-repeat top left;
   }

   .commenttext-admin {
   clear: both;
   margin: 3px 0px 10px 0px;
   padding: 20px 10px 5px 10px;
   width: 420px;
   background: #FFFFFF url(images/comment.gif) no-repeat top left;
   }

2. chaoskaizer
   Member
   Posted 3 years ago #

   Stylesheet are useless without the structure. This are like asking for making a new theme.

   If you are good with CSS, you can try 960 fluid CSS framework ↓
   http://www.designinfluences.com/fluid960gs/

3. stmcgill
   Member
   Posted 3 years ago #

   Thanks for that. Sadly my CSS skills are close to zero so I may need to get in touch with a developer to make an original one. In my ignorance I noticed that changing some values did change the widths and presumed it was that easy:)

4. stmcgill
   Member
   Posted 3 years ago #

   Now I'm confused- in this answer (http://wordpress.org/support/topic/224459?replies=2) it says it can be done in the style sheet?

Topic Closed

This topic has been closed to new replies.