Removing 1 column from layout

**tedleonard** · Dec 29, 2006 13:53

Hi all,
I'm using a free layout I found on an open source web templates site (cheating, I know

)... It's really working out pretty well, except that I want to remove the right hand column on some pages, and I'm having a pretty rough time. I can pretty much edit out the column and contents, but I can't figure out how to stretch the center column to cover where the right hand column was. Ok that was a mouthful, hopefully you understand what I mean. The template I'm working on is here http://www.newtonpolice.org/test/ Any hints you could provide would sincerely be appreciated. Thanks!!

**RetroNetro** · Dec 29, 2006 14:06

Hello

You need to adjust the right margin on the #content division:

Code:

#content {
margin: 0 110px 20px 160px;
border-left: 1px solid #f0f0f0;
border-right: 1px solid #f0f0f0;
padding: 0 10px 0 10px;
line-height: 1.6em;
text-align: left;
}

Though if you only want this to occur on certain pages you may need to add a body ID so as to alter only those pages.

**tedleonard** · Dec 29, 2006 14:31

And there you have it!! Thanks!!

**tedleonard** · Dec 29, 2006 14:33

Originally Posted by Johnny Gulag

Though if you only want this to occur on certain pages you may need to add a body ID so as to alter only those pages.

That's a little over my head, I've never had to deal with a body ID before. I'll have to look for a good tutorial on it. Anyone know of any?

**RetroNetro** · Dec 29, 2006 15:04

Hello

Glad it worked.

As for the body ID don't fear, it is really easy, give the <body> tag and id

Code:

<body id="3column"> - 3 column pages

<body id="2column"> - 2 column pages

Then in the css add selectors for the 2 content divisions:

Code:

#3column #content {
  margin: 0 110px 20px 160px;
  border-left: 1px solid #f0f0f0;
  border-right: 1px solid #f0f0f0;
  padding: 0 10px 0 10px;
  line-height: 1.6em;
  text-align: left;
}

#2column #content {
  margin: 0 10px 20px 160px;
  border-left: 1px solid #f0f0f0;
  border-right: 1px solid #f0f0f0;
  padding: 0 10px 0 10px;
  line-height: 1.6em;
  text-align: left;
}

Or this might work:

Code:

#content {
  border-left: 1px solid #f0f0f0;
  border-right: 1px solid #f0f0f0;
  padding: 0 10px 0 10px;
  line-height: 1.6em;
  text-align: left;
}
#3column #content {
  margin: 0 110px 20px 160px;
}
#2column #content {
  margin: 0 10px 20px 160px;
}

Hope it helps.