13 replies [Last post]
spamdodger
Offline
newbie
Ireland
Last seen: 13 years 47 weeks ago
Ireland
Joined: 2008-02-28
Posts: 7
Points: 0

/* column container */

I would like to use the 3 col layout found here http://matthewjamestaylor.com/blog/ultimate-3-column-blog-style-pixels.htm
But I am having problems modifying it.
What I am trying to archive is
Page width 950 pixels centered
left col 475px
center col 250px
right col 225px

here is the main part of the css
.colmask
{ position:relative; /* This fixes the IE7 overflow hidden bug */
clear:both; float:left; width:100%; /* width of whole page */
overflow:hidden; }

/* 3 column blog style settings */

.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; }

I have spent three hours on this already and still cant figure it.

any help appreciated

Spamdodger

mlecho
Offline
Regular
Last seen: 13 years 32 weeks ago
Joined: 2007-09-24
Posts: 28
Points: 0

can we see the html? I try

can we see the html? I try to stay away from position properties in my css...see if you can accomplish this with floats and margins...it's a god send when battling against ie (6 or7)

spamdodger
Offline
newbie
Ireland
Last seen: 13 years 47 weeks ago
Ireland
Joined: 2008-02-28
Posts: 7
Points: 0

Thanks for the reply mlecho

Thanks for the reply mlecho the full html and css can be seen here its just a bit too big for posting

http://matthewjamestaylor.com/blog/ultimate-3-column-blog-style-pixels.htm

I like this layout and would like to modiefy it for my own template
I have used another template from this site and find it works perfectly in all browsers so I would like to stick with it.just cant figure this one out
Thanks
spamdodger

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

spamdodger

spamdodger wrote:
http://matthewjamestaylor.com/blog/ultimate-3-column-blog-style-pixels.htm
I like this layout and would like to modiefy it for my own template

We need to see your HTML & CSS, not what you're basing it on.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

spamdodger
Offline
newbie
Ireland
Last seen: 13 years 47 weeks ago
Ireland
Joined: 2008-02-28
Posts: 7
Points: 0

Thanks for the reply Tyssen

Thanks for the reply Tyssen

This is the bare bones code
I want to change the css to these dimensions
Page width 950 pixels centered
left col 475px
center col 250px
right col 225px

The area I am having difficulty with is .colmid .colleft .col1wrap

The css

.colmask { margin:0 auto ; width: 950px ; overflow:hidden;
border:1px solid #006699 }

.colmid { float:left;width:200%;margin-left:-200px;
position:relative;right:100%;background:#FFD8B7 }
.colleft { float:left;width:100%;margin-left:-200px ;
background:#336699 }
.col1wrap { float:left;width:50%;padding-bottom:1em }

.col1 { margin:0px 0px 0px 475px;position:relative;left:100%;
overflow:hidden }
.col2 { float:right;width:250px; position:relative;left:265px }
.col3 { float:right;width:225px;position:relative;left:665px }

The html





Column 1 start


Column 2 start

Column 3 start




Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 49 weeks 1 day ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

We don't need your "bare

We don't need your "bare bones" code, we need to see all your html and all your CSS. Or better still, a link to the problem page.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

spamdodger
Offline
newbie
Ireland
Last seen: 13 years 47 weeks ago
Ireland
Joined: 2008-02-28
Posts: 7
Points: 0

http://matthewjamestaylor.com

http://matthewjamestaylor.com/blog/ultimate-3-column-blog-style-pixels.htm
This is the link to the template view the source code to see the css
thanks again

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 49 weeks 1 day ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Well, to start with your

Well, to start with your very first line:

<?xml version="1.0" encoding="utf-8"?>

...throws internet explore for a loop so it renders in it's "quirks" mode where it doesn't even try to follow standards.

Congrats on the valid code, though.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

spamdodger
Offline
newbie
Ireland
Last seen: 13 years 47 weeks ago
Ireland
Joined: 2008-02-28
Posts: 7
Points: 0

sorry Ed the template I

sorry Ed the template I directed you to is not mine.
This is a template I want to use.

my original question was
I want to use a modified version of the css found in this template.

All I want to do is change the size of each column to
Left 475
center 250
right 225

I think this is the section I need to change

.colmid { float:left;width:200%;margin-left:-200px;
position:relative;right:100%;background:#FFD8B7 }
.colleft { float:left;width:100%;margin-left:-200px ;
background:#336699 }
.col1wrap { float:left;width:50%;padding-bottom:1em }

.col1 { margin:0px 15px 0px 415px;position:relative;left:100%;
overflow:hidden }
.col2 { float:right;width:170px; position:relative;left:185px }
.col3 { float:right;width:170px;position:relative;left:555px }

this is where I am having problems
.colmid .colleft .col1wrap

Spamdodger

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Why do you keep posting a

Why do you keep posting a link to the other site? I've already told you we need to see ALL your CSS & HTML; not just a barebones example and not the other guy's site.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

spamdodger
Offline
newbie
Ireland
Last seen: 13 years 47 weeks ago
Ireland
Joined: 2008-02-28
Posts: 7
Points: 0

I seem to be having a

I seem to be having a communication problem here.
my request was how do I modify the code on the link I provided .

spamdodger wrote:
This is the link to the template , view the source code to see the css

I don't have any html or css.
anyway I figured it out myself this morning.
thanks again for your replys.

ifohdesigns
ifohdesigns's picture
Offline
Enthusiast
Providence, RI
Last seen: 10 years 18 weeks ago
Providence, RI
Timezone: GMT-4
Joined: 2008-02-22
Posts: 269
Points: 0

Ok, just to throw it out

Ok, just to throw it out there, but...

Best thread ever?

mattrossidesigns.com

spamdodger
Offline
newbie
Ireland
Last seen: 13 years 47 weeks ago
Ireland
Joined: 2008-02-28
Posts: 7
Points: 0

Jez Do you guys just post

Jez Do you guys just post junk for the sake of posting ???

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Says the guy who can't

Says the guy who can't follow repeated clear instructions properly. :rolleyes:

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference