WordPress.com

1. jbognanno
   Member
   May 17, 2009, 2:13 PM

   I'm using a three column fixed width theme which I really like (Digg 3 Column). It's just a little too narrow for some of the things I'd like to post on the left and right sidebars. If I expand the sidebars, I'd also like to slightly increase the width of the main content column (center column) so as to keep a nice looking distribution. I've fooled around with the CSS but I must not be getting all the modifications right because it's coming up rather sloppy. Can anyone help?

   Currently the width of the container is 904, but I think I'd like to get up to around 1160.

   The sidebars are at 192, so perhaps getting up to about 240 or 260?

   The center column is currently at 500px, so perhaps it could go to 520?

   I tried these numbers, but it still looks a little messy. I double checked to make sure that whenever I change a number (ej. 904px) in one place, I changed that same number to the new number (ej. 1160) everywhere I found it. Maybe there are other changes that need to be made that I'm not aware of.

   I suppose that later I'll have to recreate the image for the custom header, but that's not big deal.

   Here's the original CSS:

   ¨/*
   Theme Name: Digg 3 Column
   Theme URI: http://www.wpdesigner.com
   Description: Digg-like 3 column theme with two sidebars and a customizable header.
   Version: 1.0.2
   Author: Small Potato
   Author URI: http://www.wpdesigner.com/
   Tags: custom header, three columns, fixed width, page navigation, rtl
   */

   body, h1, h2, h3, h4, h5, h6, address, blockquote, dd, dl, hr, p, form{
   margin: 0;
   padding: 0;
   }

   body{
   font-family: Arial, Helvetica, Georgia, Sans-Serif;
   font-size: 12px;
   text-align: center;
   vertical-align: top;
   background: #666 url(images/bg_body.gif);
   color: #fff;
   }

   h1, h2, h3, h4, h5, h6{
   font-family: Arial, Helvetica, Georgia, Sans-Serif;
   font-size: 16px;
   }

   a{
   text-decoration: underline;
   color: #105cb6;
   }

   a:hover{ text-decoration: none; }

   a img{ border: 0; }

   abbr, acronym{ border: 0; }

   address, dl, p{ padding: 10px 0 0; }

   blockquote{
   margin: 10px 10px 0;
   background: #fffada url(images/bg_blockquote.gif) no-repeat 5px 7px;
   color: #736926;
   }

   blockquote p{
   padding: 10px 10px 10px 20px;
   }

   blockquote blockquote{
   margin: 10px 20px;
   background: #fff;
   color: #333;
   }

   blockquote blockquote p{ padding: 10px; }

   code{
   background: #f9f9f9;
   }

   dt{
   font-weight: bold;
   }

   dd{
   padding: 0 0 5px 15px;
   }

   hr{
   clear: both;
   margin: 15px 0 5px;
   width: 100%;
   border: 0;
   height: 1px;
   text-align: left;
   background: url(images/bg_comment_bottom.gif) no-repeat;
   }

   small{
   font-size: 10px;
   }

   input, textarea{
   font-family: Arial, Helvetica, Georgia, sans-serif;
   font-size: 12px;
   padding: 2px;
   }

   input#author, input#email, input#url, textarea#comment{
   border: 1px solid #cbb945;
   background-color: #fffadb;
   padding: 3px;
   }

   input#author, input#email, input#url{
   margin: 0 5px 0 0;
   }

   #container, #header, #menu, #menu ul li, #menu ul li a, #pagetitle, h1, #syndication, .pagewrapper, #page, .wrapper, .narrowcolumnwrapper, .narrowcolumn, .content, .post, .entry, .browse, sidebar{
   text-align: left;
   vertical-align: top;
   }

   #container{
   margin: 0 auto;
   width: 904px;
   padding: 10px 0 10px;
   }

   #header{
   margin: 0 0 10px;
   width: 904px;
   height: 250px;
   color: #333;
   position: relative;
   }
   #header-box{
   position: absolute;
   top: 40px;
   left: 0;
   z-index: 10;
   }
   #header-image{
   margin: 0 0 10px;
   position: absolute;
   z-index: -2;
   }
   #header-overlay{
   position: absolute;
   width: 904px;
   height: 250px;
   z-index: -1;
   }
   #pagetitle, #syndication, #searchbox {
   z-index: 3;
   }

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

   #menu ul li{
   float: left;
   margin: 0 5px 0 0;
   font-size: 14px;
   font-weight: bold;
   background: url(images/bg_tab_right.gif) no-repeat right top;
   color: #325b0a;
   }

   #menu ul li a{
   display: block;
   padding: 14px 20px 10px;
   text-decoration: none;
   background: url(images/bg_tab_left.gif) no-repeat left top;
   color: #325b0a;
   }

   #menu ul li a:hover{
   text-decoration: underline;
   }

   #pagetitle{
   clear: both;
   width: 904px;
   height: 155px;
   }

   #pagetitle h1{
   padding: 36px 28px 0;
   font-size: 24px;
   font-weight: bold;
   letter-spacing: 1px;
   text-transform: uppercase;
   color: #fff;
   }

   #pagetitle h1 a{
   text-decoration: none;
   color: #fff;
   }

   #syndication{
   float: left;
   padding: 15px 31px 0;
   color: #999;
   }

   #syndication a{ color: #666; }

   #syndication a.feed{
   padding: 0 0 0 19px;
   background: url(images/feed_icon.png) no-repeat 0 1px;
   }

   #searchbox{
   float: right;
   padding: 10px 31px 0;
   }

   #searchbox input#s{
   border: 1px solid #ddd;
   padding: 3px;
   background: #fff;
   }

   #searchbox input#searchsubmit{ height: 24px; }

   .pagewrapper{
   margin: 0 0 10px;
   float: left;
   width: 904px;
   background: #fff url(images/bg_page_bottom.gif) no-repeat left bottom;
   color: #333;
   }

   #page{
   float: left;
   padding: 0 5px 5px;
   background: url(images/bg_page_top.gif) no-repeat;
   }

   .wrapper{ /* This wrapper class appears only on Page and Single Post pages. */
   float: left;
   width: 500px;
   }

   .narrowcolumnwrapper{
   margin: 5px 0 0;
   float: left;
   width: 500px;
   background: #fff url(images/bg_narrowcol.gif) repeat-y;
   }

   .narrowcolumn{
   float: left;
   width: 500px;
   background: url(images/bg_narrowcol_bottom.gif) no-repeat left bottom;
   }

   .content{
   float: left;
   width: 500px;
   background: url(images/bg_narrowcol_top.gif) no-repeat left top;
   overflow: hidden;
   }

   .post{
   padding: 9px 16px 15px;
   line-height: 18px;
   }

   .post h2{
   padding: 0 0 2px;
   font-size: 16px;
   font-weight: bold;
   line-height: 27px;
   }

   .post h2 a{
   text-decoration: none;
   color: #105cb6;
   border-bottom: 1px solid #75abea;
   }
   .sticky h2 a {
   color: white;
   background: #105cb6;
   padding: 10px;
   display: block;
   margin: 5px 0;
   }

   .post img{
   padding: 4px;
   border: 1px solid #ddd;
   background: #fff;
   }

   .post img.alignleft{
   float: left;
   margin: 5px 10px 0 0;
   }

   .post img.alignright{
   float: right;
   margin: 5px 0 0 10px;
   }

   img.centered, img.aligncenter {
   display: block;
   margin-left: auto;
   margin-right: auto;
   }

   .alignright {
   float: right;
   }

   .alignleft {
   float: left;
   }

   .post img.wp-smiley{
   padding: 0;
   border: 0;
   background: none;
   }

   .entry{
   max-width:475px;
   }

   .entry h1, .entry h2, .entry h3, .entry h4, .entry h5, .entry h6{
   padding: 9px 0 0;
   }

   .entry h1{
   font-size: 20px;
   line-height: 30px;
   }

   .entry h2{ line-height: 18px; }

   .entry h3{ font-size: 14px; }

   .entry h4{ font-size: 12px; }

   .entry h5{ font-size: 11px; }

   .entry h6{ font-size: 10px; }

   .postinfo{
   font-size: 11px;
   color: #999;
   clear: both;
   }

   .postinfo a{
   color: #578cca;
   }

   .postdate{ color: #a12a2a; }

   .browse{
   border-top: 1px solid #bdbdbd;
   padding: 15px 16px;
   line-height: 18px;
   }

   .sidebar, .obar{
   margin: 0 0 0 5px;
   float: right;
   width: 192px;
   line-height: 18px;
   overflow: hidden;
   }

   .obar{
   margin: 0 5px 0 0;
   float: left;
   }

   .sidebar ul, .obar ul{
   margin: 0;
   padding: 0;
   list-style: none;
   }

   .sidebar ul li, .obar ul li{
   margin: 5px 0 0;
   padding: 9px 16px 15px;
   background: url(images/bg_ul_li.gif) no-repeat left top;
   }

   .sidebar ul li.widget_search, .obar ul li{
   padding: 15px 16px;
   }

   .sidebar ul li h2, .obar ul li h2{
   font-size: 16px;
   font-weight: bold;
   line-height: 27px;
   color: #8dab3b;
   }

   .sidebar ul ul li, .obar ul ul li{
   margin: 0;
   padding: 6px 0 3px;
   background: none;
   }

   .sidebar ul ul ul, .obar ul ul ul{ padding: 3px 0 0; }

   .sidebar ul ul ul li, .obar ul ul ul li{
   padding: 6px 0px 3px 15px;
   background: url(images/bg_arrow_right.gif) no-repeat 0px 8px;
   }

   .sidebar ul ul ul ul li, .obar ul ul ul li{
   background: url(images/bg_arrow_right_2.gif) no-repeat 0px 8px;
   }

   /* COMMENTS TEMPLATE */

   .post h3#comments, .post h3#respondtitle{
   line-height: 27px;
   color: #e45b00;
   }

   .post h3#respondtitle{
   color: #333;
   }

   ol.commentlist{
   margin: 0 0 11px;
   padding:0;
   list-style: none;
   }

   ol.commentlist li>div {
   padding: 13px 0;
   background: url(images/bg_comment_bottom.gif) no-repeat left bottom;
   }

   ol.commentlist li{
   list-style: none;
   }

   ol.commentlist li .commentmetadata{
   font-size: 11px;
   color: #546477;
   }

   ol.commentlist li .commentmetadata a{
   color: #546477;
   }

   div.navigation {
   padding-bottom: 3em;
   }

   form#commentform small{
   font-size: 11px;
   }

   #footer {
   font-size: 11px;
   color: #000;
   text-align: center;
   margin: 10px 0;
   }
   .aligncenter, div.aligncenter {
   display: block;
   margin-left: auto;
   margin-right: auto;
   }

   .wp-caption {
   border: 1px solid #ddd;
   text-align: center;
   background-color: #f3f3f3;
   padding-top: 4px;
   margin: 10px;
   -moz-border-radius: 3px;
   -khtml-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
   }

   .wp-caption img {
   margin: 0;
   padding: 0;
   border: 0 none;
   }

   .wp-caption p.wp-caption-text {
   font-size: 11px;
   line-height: 17px;
   padding: 0 4px 5px;
   margin: 0;
   }

   div.avatar {
   float: right;
   padding: 0;
   margin: 0;
   }

   The blog I need help with is sportfishingamericas.wordpress.com.

2. thesacredpath
   Member
   May 17, 2009, 2:53 PM

   The one thing to keep in mind is that according to W3C (World Wide Web Continuum) as of January 2009, 36% of people were still using 1024 x 768 monitor resolutions which means that when you take browser borders into account on a maximized browser window, you have about 1000px of maximum useful width before your visitors have to start scrolling horizontally.

   Until that 36% drops under 20%, I would not abandon those people by designing a site that is wider than what they can view. Just my opinion.

3. jbognanno
   Member
   May 17, 2009, 3:04 PM

   Ok, but perhaps I'm not maximizing my usable space. Take a look at my blog. You can see that there is space on each side of the three columns that is not being used. Perhaps I can use some of that space and thus widen my sidebars. No?

4. thesacredpath
   Member
   May 17, 2009, 6:12 PM

   One other thing I'll add here or people coming to this thread in the future, is that you also need to keep in mind is the quickly growing popularity of NetBooks when you start to ponder the possibility of making your blog wider.

   From http://derekh.com/index.php/2008/12/16/the-netbook-resolution-conundrum/

   ... the "netbook market grew by more than 160 percent quarter-on-quarter during Q3 of 2008" (5.6 million netbooks sold in Q3 2008)... Netbooks commonly come with a resolution of either 1024×600 or 800×480.

5. ellaella
   Member
   May 17, 2009, 7:08 PM

   /nod to tsp

   And don't forget people reading your blog with a handheld device and a teeny screen.

   There's nothing wrong with not using every bit of space. You need some breathing room and that's a design element too.

   My content column, btw, is 520px if you'd like an idea how wide that is. The right sidebar is 245.

Topic Closed

This topic has been closed to new replies.