Hi all, I’m trying to use this blog theme template in EE 2 (click to view page source for the code/styles)—http://matthewjamestaylor.com/blog/ultimate-3-column-blog-style-pixels.htm
What I’m having a problem with is I want to make the brown column to the right wider. The source code says its 200px with 170px being the content size. Every time I try to widen it to 300px everything gets messed up. Can anyone look at the code and suggest the correct change? I want the column in yellow at right to stay at its regular size of 170px. The blog area in white at the left is just too wide. I want the column in brown to be wider, taking away some from the white left blog content col. Once I get beyond this I can finish my new EE 2 blog. I’ve reproduced the css column section below:
/* column container */
.colmask {
position:relative; /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
clear:both;
float:left;
width:100%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */
}
/* 3 column blog style settings */
.blogstyle {
background:#ff9; /* Right column background colour */
}
.blogstyle .colmid {
float:left;
width:200%;
margin-left:-200px; /* Width of right column */
position:relative;
right:100%;
background:#FFD8B7; /* Centre column background colour */
}
.blogstyle .colleft {
float:left;
width:100%;
margin-left:-200px; /* Width of centre column */
background:#fff; /* Left column background colour */
}
.blogstyle .col1wrap {
float:left;
width:50%;
padding-bottom:1em; /* Centre column bottom padding. Leave it out if it's zero */
}
.blogstyle .col1 {
margin:0 15px 0 415px; /* Centre column side padding:
Left padding = left column width + centre column left padding width
Right padding = right column width + centre column right padding width */
position:relative;
left:100%;
overflow:hidden;
}
.blogstyle .col2 {
float:right;
width:170px; /* Width of left column content (left column width minus left and right padding) */
position:relative;
left:185px; /* Width of the left-had side padding on the left column */
}
.blogstyle .col3 {
float:right;
width:170px; /* Width of right column content (right column width minus left and right padding) */
position:relative;
left:555px;
}Thanks for any help you guys can give, sure appreciate it.