How can I remove a column from a 3-Column Fixed Width CSS stylesheet?

[Sarita]

Hello,

this might sound stupid, but I got a really nice homepage template
which unfortunately is a 3-Column Fixed Width CSS format. Now I don't
have any content for the right column and would like the middle column
just to use up that space instead.

Any way this is possible?

Thanks for your help, it is highly appreciated!
Sarita

[Evertjan.]

Sarita wrote on 06 mrt 2007 in comp.infosystem s.www.authoring.stylesheets:

this might sound stupid,

Do you care? Please don't.

but I got a really nice homepage template
which unfortunately is a 3-Column Fixed Width CSS format. Now I don't
have any content for the right column and would like the middle column
just to use up that space instead.

Any way this is possible?

Yes, just write a 2 column one for your homepage.

What is and why do you need a "homepage template"?

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[Bergamot]

Sarita wrote:

>
but I got a really nice homepage template
which unfortunately is a 3-Column Fixed Width CSS format. Now I don't
have any content for the right column and would like the middle column
just to use up that space instead.

Why don't you go and find yourself a nice 2-column template instead? ;)

Any way this is possible?

Of course, but since you haven't provided a URL it isn't possible to
give any specifics.

--
Berg

[Jukka K. Korpela]

Scripsit Sarita:

this might sound stupid, but I got a really nice homepage template
which unfortunately is a 3-Column Fixed Width CSS format.

Using a template that you cannot manage is not really a sign of stupidity
but ill-advised. It's better to use simple layout that you can handle than
to work with someone else's design and run into trouble when you wish to
modify it.

Now I don't
have any content for the right column and would like the middle column
just to use up that space instead.

Well, just remove the right column. Make sure to check that the width
setting for the entire table, if set, is consistent with the column width
settings, if set.

As a kludge, you can use CSS to suppress the third column (but the results
are unpredictable if this makes the sum of column widths different from the
setting of the total width):

td:first-child + td + td { display: none; }

Doesn't work on IE 6 or earlier, or on IE 7 in Quirks mode. Well, you could
add class attributes, say class="third", to the cells of the third column
and use a class selector:

td.third { display: none; }

which works on almost any CSS-enabled browser. But why bother, when you can
simply remove the column?

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[Sarita]

Hey there,

thank you for all your replies. I might have chosen a layout that is
more complex than what I know at the moment, but that is usually my
strategy with any new project. Otherwise, how am I going to learn. So
far I have been able to figure anything out. Be it thanks to Googling
stuff or just by playing around with it.

In case you do want to give any hints, I left the stylesheet content
at the end. I had tried playing around with the width, but so far
unsuccessful, hence me posting here...

Thanks again! Happy to learn new stuff every day!
Sarita
body {
text-align: center;
background-color: #D5D0B0;
margin-top:10px;
margin-bottom:10px;
color:#666666;
}

A:link {
COLOR: #C86000; text-decoration: none
}
A:visited {
COLOR: #C86000; text-decoration: none
}
A:active {
COLOR: #C86000; text-decoration: none
}
A:hover {
COLOR: #C86000; text-decoration: underline
}

#page_wrapper {
margin-left: auto;
margin-right: auto;
width: 760px;
text-align: left;
background: #FFFFFF url('../img/content_bg.gif' ) top left repeat-y;
}

#page_header {
height: 140px;
background: #FFFFFF url('../img/header.jpg') bottom left no-repeat;
clear: both;
}

#page_header h1 {
padding-top:50px; padding-left:15px;
margin:0px;
font-family: verdana;
font-size: 24px;
color: #FBD539;
line-height:26px;
letter-spacing:-1px;
}

#page_header h2 {
margin:0px;
padding-left:15px;
font-family: verdana;
font-size: 12px;
color: #D5D0B0;
line-height:22px;
}

#menu_bar {
margin:0px;
padding:0px;
border:0px dashed #cccccc;
height:31px;
clear:both;
background: #FFFFFF url('../img/menu_bg.gif') bottom left no-repeat;
}

#content_wrappe r {
margin-top:10px;
margin-bottom:10px;
margin-left:10px;
margin-right:10px;
border:0px dashed #FFFFFF;
}

#center {
margin-left:160px;
margin-right:160px;
border:0px dashed #cccccc;
}

#center h3 {
margin-top:0px;
margin-bottom:5px;
font-family: verdana, arial, sans-serif;
font-size: 11px;
color: #ffffff;
padding:4px;
border: 1px solid #425227;
background-color: #739240;
}

#center p {
margin-top:5px;margin-bottom:15px;
padding:4px;
font-family: verdana, arial, sans-serif;
font-size: 11px;
line-height: 16px;
}

#left_side {
float: left;
width:140px;
border:0px dashed #cccccc;
}

#left_side h3 {
margin-top:0px;
margin-bottom:5px;
font-family: verdana, arial, sans-serif;
font-size: 11px;
color: #ffffff;
padding:4px;
border: 1px solid #425227;
background-color: #739240;
}

#left_side p {
margin-top:5px;margin-bottom:15px;
padding:4px;
font-family: verdana, arial, sans-serif;
font-size: 11px;
line-height: 16px;
color: #666666;
}

#right_side {
float: right;
width:140px;
border:0px dashed #cccccc;
}

#right_side h3 {
margin-top:0px;
margin-bottom:5px;
font-family: verdana, arial, sans-serif;
font-size: 11px;
color: #ffffff;
padding:4px;
border: 1px solid #425227;
background-color: #739240;
}

#right_side p {
margin-top:5px;margin-bottom:15px;
padding:4px;
font-family: verdana, arial, sans-serif;
font-size: 11px;
line-height: 16px;
color: #666666;
}

#page_footer {
height: 60px;
background: #425227;
clear: both;
border-left: 1px solid #425227;
border-right: 1px solid #425227;
border-bottom: 1px solid #425227;
}

#page_footer p {
padding-top:15px;
text-align:center;
font-family: verdana;
font-size: 10px;
line-height:14px;
color:#D5D0B0;
}

#page_footer A:link {
COLOR: #FBD539; text-decoration: none
}
#page_footer A:visited {
COLOR: #FBD539; text-decoration: none
}
#page_footer A:active {
COLOR: #FBD539; text-decoration: none
}
#page_footer A:hover {
COLOR: #FBD539; text-decoration: underline
}
#navcontainer ul {
padding-left: 0;
margin-left: 0;
margin-top:0px;
background-color: #C86000;
background: url('../img/bar.jpg') top right no-repeat;
color: White;
float: left;
width: 100%;
font-family: verdana, arial, helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a {
padding-top: 5px;
padding-bottom: 7px;
padding-left:10px;
padding-right:10px;
background-color: transparent;
color: White;
text-decoration: none;
float: left;
border-right: 1px solid #BD620E;
}

#navcontainer ul li a:hover {
background-color: #DE6B02;
background: url('../img/bar_bg_hover.gi f') bottom left repeat-x;
color: #fff;
}

#linklist {
padding-left: 0;
margin-left: 0;
border-bottom: 1px solid #D1D9C4;
width: 140px;
}

#linklist li {
list-style: none;
margin: 0;
line-height:20px;
border-top: 1px solid #D1D9C4;
font-family:verdana;
font-size:10px;
}

#linklist li a { text-decoration: none; }

..thumbnail_lef t {
float:left;
margin-right:10px;
margin-bottom:5px;
border:0px;
}

..thumbnail_rig ht {
float:right;
margin-left:10px;
margin-bottom:5px;
border:0px;
}

-----------------------------------

On Mar 6, 9:10 pm, "Jukka K. Korpela" <[e-mail] t.fiwrote:

Scripsit Sarita:

this might sound stupid, but I got a really nice homepage template
which unfortunately is a 3-Column Fixed Width CSS format.

Using a template that you cannot manage is not really a sign of stupidity
but ill-advised. It's better to use simple layout that you can handle than
to work with someone else's design and run into trouble when you wish to
modify it.

Now I don't
have any content for the right column and would like the middle column
just to use up that space instead.

Well, just remove the right column. Make sure to check that the width
setting for the entire table, if set, is consistent with the column width
settings, if set.

As a kludge, you can use CSS to suppress the third column (but the results
are unpredictable if this makes the sum of column widths different from the
setting of the total width):

td:first-child + td + td { display: none; }

Doesn't work on IE 6 or earlier, or on IE 7 in Quirks mode. Well, you could
add class attributes, say class="third", to the cells of the third column
and use a class selector:

td.third { display: none; }

which works on almost any CSS-enabled browser. But why bother, when you can
simply remove the column?

--
Jukka K. Korpela ("Yucca")http://www.cs.tut.fi/~jkorpela/

[Jukka K. Korpela]

Scripsit Sarita:

I might have chosen a layout that is
more complex than what I know at the moment, but that is usually my
strategy with any new project.

Your choice. Generally, it's best to _work_ with something that you master
and _play_ with things that you don't master yet.

Besides, the layout you have chosen (copied?) is also fundamentally flawed
in addition to being too complex. For example:

body {
text-align: center;
background-color: #D5D0B0;
margin-top:10px;
margin-bottom:10px;
color:#666666;
}

Centering each line is _bad_. If you wish to center _some_ inline content,
don't do it in <bodysettings .

The contrast between foreground and background color is quite insufficient.
Even a blind person could see this, e.g. by using the Colour Contrast
Analyser at
http://juicystudio.com/services/colourcontrast.php

A:link {
COLOR: #C86000; text-decoration: none
}
A:visited {
COLOR: #C86000; text-decoration: none
}

Using link colors that drastically differ from common browser defaults,
setting color without setting background, destroying the unvisited/visited
distinction, and removing underlining - how much more wrong could it be? Let
me guess... later rules will set font size in pixels to some small value?

Dump it. Start over. There's no point in improving something that's
inherently so broken.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[Andy Dingley]

On 6 Mar, 19:16, "Sarita" <SarahCec...@gm ail.comwrote:

this might sound stupid, but I got a really nice homepage template
which unfortunately is a 3-Column Fixed Width CSS format. Now I don't
have any content for the right column and would like the middle column
just to use up that space instead.

I suggest you find a new CSS stylesheet for 2-column layout, then use
that.

You don't need much of a "template" with CSS. Good CSS only requires
fairly simple HTML and use of class attributes, so all the "template"
that's needed is a tiny bit of advice along the lines of, 'Have <div
class="left-column" >, <div class="centre-column" and <div
class="right-column" >'. You don't need the complex old "fill in the
blanks" templates from the <tabledays.

The CSS itself though might be complex. A good 3-column stylesheet
(like glish.com) has all manner of complexity in it, to control
scrolling and proportioning behaviour between the columns, with widely
varying browser window widths. As the 2-column problem is just
inherently a lot simpler than the 3-column problem, then a 2-column
stylesheet is often a _lot_ simpler. Rather than trying to cut-down
your 3 column one, start agin with a known working 2-column one. It's
likely that all you'll need to do in the HTML is little more than
rename a <divfrom "leftmost-column" to "menu-sidebar" or similar.

[Andy Dingley]

On 6 Mar, 21:10, "Jukka K. Korpela" <[e-mail] t.fiwrote:

Using a template that you cannot manage is not really a sign of stupidity
but ill-advised.

What's a "template" in the sense you're using it here?

This is c.i.w.a.stylesh eets, not c.i.w.a.templat es

Although the point you make might well apply to templates, it doesn't
have to apply to CSS and I suspect that the OP was using it in that
sense, as much as in the sense of a "template" (i.e. a prototype for
some HTML they will then create themselves).

It's better to use simple layout that you can handle than
to work with someone else's design and run into trouble when you wish to
modify it.

One of CSS' great commercial advantages (whether by design or
emergent) is that (HTML-skilled, CSS-ignorant, design-ignorant) coders
can make use of exactly such a layout. They will have trouble if they
modify it (and so they shouldn't try), but they can swap in a
different ready-made one easily enough. As 2- and 3-column CSS is
hardly rocket science, there are plenty to choose from.

Although what you say is (as usual) correct in the abstract, it's
still quite unhelpful to the OP.

[Jukka K. Korpela]

Scripsit Andy Dingley:

You don't need much of a "template" with CSS. Good CSS only requires
fairly simple HTML and use of class attributes,

And perhaps not even class attributes, though they make things easier. And
sometimes an id attribute is more useful.

so all the "template"
that's needed is a tiny bit of advice along the lines of, 'Have <div
class="left-column" >, <div class="centre-column" and <div
class="right-column" >'.

Those class attributes are paradigmaticall y wrong. They relate to the
intended layout, not meaning. Things get really confusing if you later
design, say, an alternate stylesheet that puts "left-column" on the very
right, or at the bottom.

Better: class="navi", class="content" , class="ads".

>You don't need the complex old "fill in the
blanks" templates from the <tabledays.

To be honest, to design page layout using div elements and CSS _is_ more
difficult than playing with table layout loosely. It's still usually
_better_, for new pages, but let's not pretend it to be easier. Quickly, how
do you make the design occupy all the available height? (Compare this with
<table ... height="100%", which is nonstandard and only works on "quirks"
mode, but still.)

It's
likely that all you'll need to do in the HTML is little more than
rename a <divfrom "leftmost-column" to "menu-sidebar" or similar.

So I guess you really didn't meant the class names you first mentioned to be
exemplary. Too bad people (unlike CSS processors) tend to remember better
what is said _first_. :-(

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[Jukka K. Korpela]

Scripsit Andy Dingley:

>Using a template that you cannot manage is not really a sign of
stupidity but ill-advised.

What's a "template" in the sense you're using it here?

Whatever the original poster meant by it. It's probably a collection of HTML
markup, with dummy content, and associated CSS. The emphasis seemed to be on
the CSS side.

>It's better to use simple layout that you can handle than
to work with someone else's design and run into trouble when you
wish to modify it.

One of CSS' great commercial advantages (whether by design or
emergent) is that (HTML-skilled, CSS-ignorant, design-ignorant) coders
can make use of exactly such a layout.

"Such"? Which of the alternatives?

They will have trouble if they
modify it (and so they shouldn't try), but they can swap in a
different ready-made one easily enough.

Technically ignorant people can naturally produce great content, and they
need not even know about the rendering. They simply write content using
either simple HTML markup according to instructions or using a wysiwyg
program, hopefully realizing that what they see is not what others get, in
rendering. They should be _unaware_ of any styling, or else they should know
what happens or might happens in styling. This is where a little
understanding of CSS is much worse than total ignorance.

If you give CSS to kids (metaphoricall speaking - the "kids" could be of any
age), they'll just spoil everything. It's good for playing but not for work.

As 2- and 3-column CSS is
hardly rocket science, there are plenty to choose from.

You didn't really explain how to achieve 100% height. If you don't
understand how CSS works, you should not even select a CSS style sheet. How
could a CSS-ignorant person know which of the zillions of 2- and 3-column
CSS designs really works? Most of them simply won't, in the World Wide Web
sense (which includes any resolution and any browser).

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/