Need to widen middle column, can’t find the CSS code

  • Hello everyone, I am using the WordPress Theme Generator, and I am trying to take what it built for me and tweak it to better suit my needs.

    I have been able to figure out most everything else from the context of other posts, except this. I have read other threads asking how to widen the main column, but the code they post looks nothing like what I have in my css file.

    Would any kind people out there be able to show me how to force my middle column wider by, I dunno, 100px or more? (If I need to change it later, I would like to be able to by changing a value or something like that)

    Thank you all very much, current code to follow.

    /*
Theme Name: WordPress Theme Generator
Theme URI: https://www.yvoschaap.com/wpthemegen/
Description: WordPress Custom Theme for Gamers University created with the <a href="https://www.yvoschaap.com/wpthemegen/">WordPress Theme Generator</a>. To edit your current theme go: <a href="https://tinyurl.com/597mp2">edit settings</a>.
Version: 11 Aug, 13:01
Author: W.P. Gen
Author URI: https://www.yvoschaap.com/

*/

html>body #content {
	height: auto;
	min-height: 580px;
}

body{
	font-family: verdana;
	font-size: 95%;
	line-height: 115%;
	background-color: #030300;
	background-image: url(yoururl);
	background-repeat: repeat;
	background-position: center top;
	text-align: center;
}

body,td,th {
	color: #FFFFFF;
}

a, a:link {
	padding: 1px;
	color: #FFFFCC;
	text-decoration: underline;
}

a:hover {
	color: #FFFFCC;
	text-decoration: none;
	SP_HOVERLINK;
}

h1 {
	font-family: georgia;
	font-weight: bold;
	font-size: 190%;
	padding-top: .1em;
	padding-bottom: .5em;
}

h2 {
	font-family: Arial;
	font-weight: bold;
	font-size: 150%;
}

h3 {
	font-family: georgia;
	font-size: 130%;
}

h4 {
	font-size: 105%;
        text-align: center;
}

p {
	font-size: 80%;
	margin-bottom:1em;
}

strong, b {
	font-weight: bold;
}

em, i {
	font-style: italic;
}

code {
	font: 1.1em 'Courier New', Courier, Fixed;
}

acronym, abbr
{
	font-size: 0.9em;
	letter-spacing: .07em;
}

a img {
	border: none;
}

#hd{
	text-align: center;
	padding-top: 24px;
}
#hd h1{
	font-size: 290%;
	color: #FFFFFF;

}

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

h3 a:link, h3 a:hover, h3 a:visited{
	color: #0099DD;
}

.item {
	padding: 10px;
	background-color: #1A1A1A;
	background-image: url(images/bg_overlay.png);
	background-repeat: repeat;
	text-align:left;
	border: 1px solid #1A1A1A;
	margin-bottom: 1em;
	border: 1pt solid #000000;

}

.item ul {
	list-style-type: disc;
	padding-left: 15px;
	margin-left: 10px;
	font-size: 80%;
}

.item ol{
	list-style-type: decimal;
	padding-left: 15px;
	margin-left: 10px;
	font-size: 80%;
}

.itemhead{
	padding-top: 5px;
	padding-bottom: 5px;
}

.chronodata {
	display: inline;
	text-align: right;
	margin-left: 2em;
	font-size: 80%;
}

.itemhead h3{
	display: inline;
}

input{
	font-size: 80%;
}

.metadata{
	line-height: 190%;
	font-size: 75%;
}

.metadata a:link, .metadata a:hover, .metadata a:visited{
	color: #FFFFCC;
}

.tags, .catagory {

	display: block;

}

.commentlist p {
	clear: both;
	font-size: 95%;
}

cite{
	font-size: 95%;
}

blockquote {
	margin: 15px 30px 0 10px;
	padding-left: 20px;
	border-left: 5px solid #ddd;
	}

blockquote cite {
	margin: 5px 0 0;
	display: block;
}

.commentmetadata {
	font-size: 80%;
	float: right;

}
.commentlist {
	margin-top: 5px;
}
.commentlist li {
	padding: 2px;
	border-top: 1px solid #1A1A1A;
}

.navigation {
	display: block;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 10px;
	color: #FFFFCC;
}

.navigation a:link, .navigation a:hover, .navigation a:visited{
	color: #FFFFCC;
}

.alignright {
	float: right;
}

.alignleft {
	float: left
}

#secondary, #third{
	background-color:  ;
	background-image: url(/);
	background-repeat: repeat;
	text-align:left;
	padding: 0px;
	border: 1px solid #1A1A1A;
	SP_GRADIENT
}

#secondary h4, #third h4{
	color: #859E6C;
	font-family: Trebuchet MS, arial, sans-serif;
	margin-top: 5px;
	padding: 3px;

}

#secondary p, #third p{
		padding: 3px;
		font-size: 70%;
}

#searchform {
	clear: both;
	margin-bottom: 5px;
	margin-left: 2px;
	padding: 3px;
}

#third {
	margin-left: 9px;
}

#menu {padding:0; border:0px solid #fff }
#menu ul {list-style:none; margin:0; padding:0; font-size:85%; }
#menu ul li { padding:0; margin:0; border-bottom:1px solid #FFFFFF; }
#menu ul li a { display:block; padding:4px 4px 4px 10px; text-decoration:none; color: #FFFFFF; }
#menu ul li a:hover { color:myheadttcolor; background: #0099DD; }

li .categories, li .linkcat, li .pagenav {
	list-style: none;
	margin: 0px;
	padding: 0px;
}

.yui-nav{
	margin-bottom: -1px;
}

.yui-navset .yui-nav a:hover {
	background-color: #0099DD;
	color: #FFFFFF;
}

.yui-navset .yui-nav li a {
    background-color: #1A1A1A;
	background-image: url(images/bg_overlay.png);
	background-repeat: repeat;
	border-bottom: 0px;
	color: #FFFFFF;
	padding: .3em .7em .3em .7em;
	text-decoration:none;
	font-size: 85%;
}

#wp-calendar {
	empty-cells: show;
	font-size: 90%;
	margin: 0;
	width: 90%;
	padding: 3px;
}

#wp-calendar #next a {
	padding-right: 10px;
	text-align: right;
}

#wp-calendar #prev a {
	padding-left: 10px;
	text-align: left;
}

#wp-calendar a {
	display: block;
	text-decoration: none;
}

#wp-calendar td {
	color: #FFFFFF;
	font-size: 70%;
	letter-spacing: normal;
	padding: 2px 0;
	text-align: center;
}

#wp-calendar #today {
	background: ;
	color: #0099DD;
}

#wp-calendar th {
	font-style: normal;
	text-transform: capitalize;
}

#ft {
	text-align: center;
	margin-top: 10px;
	margin-bottom: 10px;
	color: #FFFFCC;
}

#ft a:link, #ft a:hover, #ft a:visited{
	color: #FFFFCC;
}
Viewing 10 replies - 1 through 10 (of 10 total)
  • Thread Starter endymian

    (@endymian)

    Alternatively, would I be able to make this theme simply size itself according to the side of the window? The preview in the WP theme generator seems to do this, but the end product does not.

    Thank you very much

    Thread Starter endymian

    (@endymian)

    I have done more digging (I really am trying to work here) and I have discovered where the column sizes are controlled, they are not in the code file I posted in the first post, but in the reset-fonts-grids-tabs.css file (code at end of post)

    I have found the place in the code where the center column’s size is specified (750px) which would be fine to resize, but it seems that the rightside column’s size is specified in some sort of ratio to the center column, so that creates a problem too. If I make the center column wider, the right sidebar gets bigger too and that defeats the purpose.

    Does anyone know how I can manipulate this code so that the center column widens itself to accommodate the current size of the browser window?

    Thank you very much

    /*
Copyright (c) 2007, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
https://developer.yahoo.net/yui/license.txt
version: 2.3.0
*/
/*reset.css*/body{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup,sub{line-height:-1px;vertical-align:text-top;}sub{vertical-align:text-bottom;}input, textarea, select{font-family:inherit;font-size:inherit;font-weight:inherit;}
/*fonts.css*/body {font:13px/1.22 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}table {font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:99%;}
/*grids.css*/body{text-align:center;}#ft{clear:both;}#doc3,#doc32,#doc33,#doc34,.yui-t1,.yui-t2,.yui-t3,.yui-t4,.yui-t5,.yui-t6,.yui-t7{margin:auto;text-align:left;width:57.69em;*width:56.301em;min-width:750px;}#doc32{width:73.074em;*width:71.313em;}#doc33{margin:auto 10px;width:auto;}#doc34{width:74.923em;*width:73.117em;}.yui-b{position:relative;}.yui-b{_position:static;}#yui-main .yui-b{position:static;}#yui-main{width:100%;}.yui-t1 #yui-main,.yui-t2 #yui-main,.yui-t3 #yui-main{float:right;margin-left:-25em;}.yui-t4 #yui-main,.yui-t5 #yui-main,.yui-t6 #yui-main{float:left;margin-right:-25em;}.yui-t1 .yui-b{float:left;width:12.3207em;*width:12.0106em;}.yui-t1 #yui-main .yui-b{margin-left:13.3207em;*margin-left:13.0106em;}.yui-t2 .yui-b{float:left;width:13.8456em;*width:13.512em;}.yui-t2 #yui-main .yui-b{margin-left:14.8456em;*margin-left:14.512em;}.yui-t3 .yui-b{float:left;width:23.0759em;*width:22.52em;}.yui-t3 #yui-main .yui-b{margin-left:24.0759em;*margin-left:23.52em;}.yui-t4 .yui-b{float:right;width:13.8456em;*width:13.512em;}.yui-t4 #yui-main .yui-b{margin-right:14.8456em;*margin-right:14.512em;}.yui-t5 .yui-b{float:right;width:18.4608em;*width:18.016em;}.yui-t5 #yui-main .yui-b{margin-right:19.4608em;*margin-right:19.016em;}.yui-t6 .yui-b{float:right;width:23.0759em;*width:22.52em;}.yui-t6 #yui-main .yui-b{margin-right:24.0759em;*margin-right:23.52em;}.yui-t7 #yui-main .yui-b{display:block;margin:0 0 1em 0;}#yui-main .yui-b{float:none;width:auto;}.yui-gb .yui-g,.yui-gb .yui-gb,.yui-gb .yui-u,.yui-g .yui-gb .yui-u,.yui-gb .yui-gc,.yui-gb .yui-gd,.yui-gb .yui-ge,.yui-gb .yui-gf,.yui-gc .yui-u,.yui-gc .yui-g,.yui-gd .yui-u{float:left;margin-left:2%;width:32%;}.yui-gb .yui-gb .yui-u,.yui-gb .yui-gc .yui-u{_margin-left:1.2%;*margin-left:1.7%;}.yui-g .yui-gb .yui-u{_margin-left:.8%;}.yui-gb .yui-u{margin-left:2%;width:32%;float:right;*width:31.8%;}.yui-gb div.first{margin-left:0;*margin-right:1px;float:left;}.yui-gb .yui-gb div.first{*margin-right:0;width:31.7%;}.yui-gb .yui-gc div.first,.yui-gb .yui-gd div.first{*margin-right:0;}.yui-g .yui-gc div.first,.yui-g .yui-ge div.first{float:left;}.yui-gb .yui-gd .yui-u{*width:66%;_width:61.2%;}.yui-gb .yui-gd div.first{*width:31%;_width:29.5%;}.yui-gb .yui-gc .yui-u,.yui-g .yui-gc .yui-u{_float:right;width:32%;_width:29.9%;}.yui-gb .yui-gc div.first{width:66%;*width:64.5%;*float:left;*margin-left:0;}.yui-gb .yui-ge .yui-u,.yui-gb .yui-gf .yui-u{margin:0;}.yui-g .yui-u,.yui-g .yui-g,.yui-g .yui-gb,.yui-g .yui-gc,.yui-g .yui-gd,.yui-g .yui-ge,.yui-g .yui-gf,.yui-gc .yui-u,.yui-gd .yui-g,.yui-g .yui-gc .yui-u,.yui-ge .yui-u,.yui-ge .yui-g,.yui-gf .yui-g,.yui-gf .yui-u{float:right;display:inline;}.yui-g div.first,.yui-g div.first,.yui-gc div.first,.yui-gc div.first div.first,.yui-gd div.first,.yui-ge div.first,.yui-gf div.first{float:left;}.yui-g .yui-g .yui-u,.yui-gb .yui-g .yui-u,.yui-gc .yui-g .yui-u,.yui-gd .yui-g .yui-u,.yui-ge .yui-g .yui-u,.yui-gf .yui-g .yui-u{width:48.1%;*margin-left:0;}.yui-g .yui-g div.first{*margin:0;}.yui-gb .yui-g div.first{*margin-right:1px;}.yui-gb .yui-gb .yui-u{_margin-left:.7%;}.yui-gb .yui-g div.first,.yui-gb .yui-gb div.first{*margin-left:0;}.yui-gc .yui-g .yui-u,.yui-gd .yui-g .yui-u{_width:48.1%;*width:48.1%;*margin-left:0;}.yui-g .yui-u,.yui-g .yui-g,.yui-g .yui-gb,.yui-g .yui-gc,.yui-g .yui-gd,.yui-g .yui-ge,.yui-g .yui-gf{width:49.1%;}.yui-g .yui-gb div.first,.yui-gb div.first,.yui-gc div.first,.yui-gd div.first{margin-left:0;}.yui-g .yui-gc div.first,.yui-gc div.first,.yui-gd .yui-g,.yui-gd .yui-u{width:66%;}.yui-gd div.first,.yui-gb .yui-gd div.first{width:32%;}.yui-g .yui-gd div.first{_width:29.9%;}.yui-ge .yui-u,.yui-ge .yui-g,.yui-gf div.first{width:24%;}.yui-ge div.first,.yui-gf .yui-g,.yui-gf .yui-u{width:74.2%;}.yui-gb .yui-ge .yui-u,.yui-gb .yui-gf div.first{*width:24%;_width:20%;}.yui-gb .yui-ge div.first,.yui-gb .yui-gf .yui-u{*width:73.5%;_width:65.5%;}#bd:after,.yui-g:after,.yui-gb:after,.yui-gc:after,.yui-gd:after,.yui-ge:after,.yui-gf:after{content:".";display:block;height:0;clear:both;visibility:hidden;}#bd,.yui-g,.yui-gb,.yui-gc,.yui-gd,.yui-ge,.yui-gf{zoom:1;}

/* default space between tabs */
.yui-navset .yui-nav li {
    margin-right:0.5em; /* horizontal tabs */
}
.yui-navset-left .yui-nav li, .yui-navset-right .yui-nav li {
    margin:0 0 0.5em; /* vertical tabs */
}

/* default width for side tabs */
.yui-navset-left .yui-nav, .yui-navset-right .yui-nav { width:6em; }
.yui-navset-left { padding-left:6em; } /* map to nav width */
.yui-navset-right { padding-right:6em; } /* ditto */

/* core */

.yui-nav, .yui-nav li {
    margin:0;
    padding:0;
    list-style:none;
}
.yui-navset li em { font-style:normal; }

.yui-navset {
    position:relative; /* contain absolute positioned tabs (left/right) */
    zoom:1;
}

.yui-navset .yui-content { zoom:1; }

.yui-navset .yui-nav li {
    display:inline-block;
    display:-moz-inline-stack;
    *display:inline; /* IE */
    vertical-align:bottom; /* safari: for overlap */
    cursor:pointer; /* gecko: due to -moz-inline-stack on anchor */
    zoom:1; /* IE: kill space between horizontal tabs */
}

.yui-navset-left .yui-nav li, .yui-navset-right .yui-nav li {
    display:block;
}

.yui-navset .yui-nav a {
    outline:0; /* gecko: keep from shifting */
}

.yui-navset .yui-nav a { position:relative; } /* IE: to allow overlap */

.yui-navset .yui-nav li a {
    display:block;
    display:inline-block;
    vertical-align:bottom; /* safari: for overlap */
    zoom:1;
}

.yui-navset-left .yui-nav li a, .yui-navset-right .yui-nav li a {
    display:block;
}

.yui-navset-bottom .yui-nav li a {
    vertical-align:text-top; /* for inline overlap (reverse for Op border bug) */
}

.yui-navset .yui-nav li a em { display:block; }

/* position left and right oriented tabs */
.yui-navset-left .yui-nav, .yui-navset-right .yui-nav { position:absolute; z-index:1; }
.yui-navset-left .yui-nav { left:0; }
.yui-navset-right .yui-nav { right:0; }

.yui-navset .yui-nav li a, .yui-navset .yui-content {
    border:1px solid #000;  /* label and content borders */
}

.yui-navset .yui-nav .selected a, .yui-navset .yui-nav a:hover, .yui-navset .yui-content {
    background-color:#f6f7ee; /* active tab, tab hover, and content #030300 */
}

.yui-navset .yui-nav li em { padding:.5em; } /* tab padding */

/* defaults to orientation "top" */
.yui-navset .yui-nav .selected a {
    border-bottom-width:0; /* no bottom border for active tab */
    padding-bottom:1px; /* to match height of other tabs */
}

.yui-navset .yui-content {
    margin-top:-1px; /* for active tab overlap */
}

/* overrides for other orientations */

.yui-navset-bottom .yui-nav .selected a {
    border-width:0 1px 1px; /* no top border for active tab */
    padding:1px 0 0; /* to match height of other tabs */
}

.yui-navset-bottom .yui-content {
    margin:0 0 -1px; /* for active tab overlap */
}

.yui-navset-left .yui-nav li.selected a {
    border-width:1px 0 1px 1px; /* no right border for active tab */
    padding:0 1px 0 0; /* to match width of other tabs */
}

.yui-navset-left .yui-content {
    margin:0 0 0 -1px; /* for active tab overlap */
}

.yui-navset-right .yui-nav li.selected a {
    border-width:1px 1px 1px 0; /* no left border for active tab */
    padding:0 0 0 1px; /* to match width of other tabs */
}

.yui-navset-right .yui-content {
    margin:0 -1px 0 0; /* for active tab overlap */
}
    Thread Starter endymian

    (@endymian)

    Is there anybody who can help me with this, please?

    URL of site ?

    Hi, I was just checking this forum for the same problem and you’ve pointed me in the right direction.

    The part where you have found the 750px is actually for the overall width of your blog – all three columns. Increasing that number to 960px should be enough to have your blog perfectly fit the width of the screen.

    However, this makes the right column increase in size while the other two (left and main) remain the same width.

    NOW, how to change the width of the individual rows?

    Just a few lines down from where you found the px width for the blog is an entry:

    #yui-main{width:100%;}

    This controls the width of the main column. However, increasing this percentage only makes it run into the left column, and decreasing it makes it smaller.

    I hope this helps in some way.

    Ideally, the main column should be 380px wide, and both side columns 180px each.

    Thread Starter endymian

    (@endymian)

    the site is here

    I’ve discovered that if I change the width:57.69em;*width:56.301em;min-width:750px;
    to say
    width:auto;*width:auto;min-width:750px;
    it will resize the middle column to the size of the browser window. Which is what I wanted, but doing this screws up the left and right side bars (the right sidebar is still coded to be sized in a 1/3 ratio to the middle; which is what I need to change.)

    I guess I’ve found how to control the center just the way I want it, now I have to find where the side columns are controlled because they are broken now because of what I did. I can’t find the code to manipulate those anywhere, I’ve been experimenting by changing values here and there but nothing seems to make a difference.

    Thread Starter endymian

    (@endymian)

    The part where you have found the 750px is actually for the overall width of your blog – all three columns. Increasing that number to 960px should be enough to have your blog perfectly fit the width of the screen.

    However, this makes the right column increase in size while the other two (left and main) remain the same width.

    NOW, how to change the width of the individual rows?

    Just a few lines down from where you found the px width for the blog is an entry:

    #yui-main{width:100%;}

    This controls the width of the main column. However, increasing this percentage only makes it run into the left column, and decreasing it makes it smaller.

    Thank you for this,

    I have tried changing that #yui-main value, making it smaller only makes a gap between the main column and the left sidebar. And no matter what I set the px width to, which you believe to be the size for the entire blog, it only affects the main colum and the right column (which is dynamic–and I need to find how to fix that)

    Now that the main column is set to auto-resize, the right column auto-resizes with it, and it looks atrocious. Also the margins on the left and right edges are now mysteriously gone, I need to find out how to put those back too. :\

    That was a good guess, but I think there’s something else here that is controlling those columns. Thank you for your help! ??

    Thread Starter endymian

    (@endymian)

    I may be on to something now, somewhere in this mess is where the side columns (at least the right hand one) is controlled:

    .yui-u{margin-left:2%;width:32%;float:right;*width:31.8%;}.yui-gb div.first{margin-left:0;*margin-right:1px;float:left;}.yui-gb .yui-gb div.first{*margin-right:0;width:31.7%;}.yui-gb .yui-gc div.first,.yui-gb .yui-gd div.first{*margin-right:0;}.yui-g .yui-gc div.first,.yui-g .yui-ge div.first{float:left;}.yui-gb .yui-gd .yui-u{*width:66%;_width:61.2%;}.yui-gb .yui-gd div.first{*width:31%;_width:29.5%;}.yui-gb .yui-gc .yui-u,.yui-g .yui-gc .yui-u{_float:right;width:32%;_width:29.9%;}.yui-gb .yui-gc div.first{width:66%;*width:64.5%;*float:left;*margin-left:0;}.yui-gb .yui-ge .yui-u,.yui-gb .yui-gf .yui-u{margin:0;}.yui-g .yui-u,.yui-g .yui-g,.yui-g .yui-gb,.yui-g .yui-gc,.yui-g .yui-gd,.yui-g .yui-ge,.yui-g .yui-gf,.yui-gc .yui-u,.yui-gd .yui-g,.yui-g .yui-gc .yui-u,.yui-ge .yui-u,.yui-ge .yui-g,.yui-gf .yui-g,.yui-gf .yui-u{float:right;display:inline;}.yui-g div.first,.yui-g div.first,.yui-gc div.first,.yui-gc div.first div.first,.yui-gd div.first,.yui-ge div.first,.yui-gf div.first{float:left;}.yui-g .yui-g .yui-u,.yui-gb .yui-g .yui-u,.yui-gc .yui-g .yui-u,.yui-gd .yui-g .yui-u,.yui-ge .yui-g .yui-u,.yui-gf .yui-g .yui-u{width:48.1%;*margin-left:0;}.yui-g .yui-g div.first{*margin:0;}.yui-gb .yui-g div.first{*margin-right:1px;}.yui-gb .yui-gb .yui-u{_margin-left:.7%;}.yui-gb .yui-g div.first,.yui-gb .yui-gb div.first{*margin-left:0;}.yui-gc .yui-g .yui-u,.yui-gd .yui-g .yui-u{_width:48.1%;*width:48.1%;*margin-left:0;}.yui-g .yui-u,.yui-g .yui-g,.yui-g .yui-gb,.yui-g .yui-gc,.yui-g .yui-gd,.yui-g .yui-ge,.yui-g .yui-gf{width:49.1%;}.yui-g .yui-gb div.first,.yui-gb div.first,.yui-gc div.first,.yui-gd div.first{margin-left:0;}.yui-g .yui-gc div.first,.yui-gc div.first,.yui-gd .yui-g,.yui-gd .yui-u{width:66%;}.yui-gd div.first,.yui-gb .yui-gd div.first{width:32%;}.yui-g .yui-gd div.first{_width:29.9%;}.yui-ge .yui-u,.yui-ge .yui-g,.yui-gf div.first{width:24%;}.yui-ge div.first,.yui-gf .yui-g,.yui-gf .yui-u{width:74.2%;}.yui-gb .yui-ge .yui-u,.yui-gb .yui-gf div.first{*width:24%;_width:20%;}.yui-gb .yui-ge div.first,.yui-gb .yui-gf .yui-u{*width:73.5%;_width:65.5%;}#bd:after,.yui-g:after,.yui-gb:after,.yui-gc:after,.yui-gd:after,.yui-ge:after,.yui-gf:after{content:".";display:block;height:0;clear:both;visibility:hidden;}#bd,.yui-g,.yui-gb,.yui-gc,.yui-gd,.yui-ge,.yui-gf{zoom:1;}

    By goofing around with some of the values in here (mostly anything that is set to be a percentage) I got some altered behavior out of the right side column. But the best I could do before utterly breaking the code and having to restore from a backup was to hard set it to 240px, but I could not change its positon–so there was a giant gap between the right side column and the main column…sideways progress.

    Ok, found something:

    look for this line of code:

    .yui-u{float:left;margin-left:2%;width:32%;}

    Altering that “32%” affects the width of your right sidebar. BUT the main column does not stretch out to compensate. AND by increasing that 100% data from earlier only increases the width into the left column.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Need to widen middle column, can’t find the CSS code’ is closed to new replies.