2 column css template wanted

J

John Latter

Hi,

Does anyone know of a 2 column css template where the height of both
columns stays the same irrespective of which column has the 'longest'
content - and where the content stays WITHIN the columns?

I've spent 2 or 3 hours trying to find a solution and am now so tired
I thought I would ask for help!

In the example below, the heights of the columns stay the same but is
determined by the right hand column content - if there's more
'vertical content' in the left hand column then it overflows into the
background colour.

I can't see why but I'm only just learning ('sigh')

<html>
<head>
<title>Page title</title><style>
body {
margin:10px 10px 0px 10px;
padding:0;
background-color:#ffffcc;
}

#box1 {
background:#003200;
}

#box2 {
margin-left:180px;
padding-left:10px;
background:#ffffcc;
}

#box1a {
position:absolute;
top:10px;
left:10px;
}

#box2a {
background:#66ffcc;}
</style>
</head>
<body>
<div id="box1">
<div id="box1a">some<P>content<P>and some text<P>
some<P>content<P>and some text<P>
some<P>content<P>and some text<P>
some<P>content<P>and some text<P>
some<P>content<P>and some text<P>
some<P>content<P>and some text<P></div>
<div id="box2">
<div id="box2a">
some<P>content<P>and sometext<P>
some<P>content<P>and some text<P>some<P>content<P>
and some text<P>
</div>
</div>
</div>
</body>
</html>

Also, does anyone know why I get a bottom margin showing even though
I've set it to 0px? In some of my earlier fumblings I sometimes got
rid of it on IE6 and once on Netscape 7.1 but NEVER on Opera 7.2

I hope the above code is accurate - I've choppewd and changed it so
much that I'm too tired to see if there are any glaring errors!

--

John Latter

The 'Socially Acceptable Violence' website:
http://members.aol.com/jorolat/sac.html

Model of an Internal Evolutionary Mechanism
http://members.aol.com/jorolat/TEM.html
 
J

John Latter

Those look great in Mozilla but don't do it for my IE6. Here's one with
three columns that seems to work, it can surely be modified for two
colums:

http://www.pixy.cz/blogg/clanky/css-3col-layout/

I think I bookmarked that from a list here:

http://nemesis1.f2o.org/templates.php?screen=0
Click to expand...

Thankyou John, there's some interesting stuff there & I should be able
to learn something!


--

John Latter

The 'Socially Acceptable Violence' website:
http://members.aol.com/jorolat/sac.html

Model of an Internal Evolutionary Mechanism
http://members.aol.com/jorolat/TEM.html
 
T

Toby A Inkster

John said:
Does anyone know of a 2 column css template where the height of both
columns stays the same irrespective of which column has the 'longest'
content - and where the content stays WITHIN the columns?
Click to expand...

The trick is, don't worry about how long each column is. Set the
background of each to transparent (the default) and put your column
backgrounds as the background for <body>

Not entirely sure if I've explained it well, but here is an example
(beware: requires cookies, fixed 800px width design)

http://www.goddamn.co.uk/tobyink/setstyle.php?style=modern

To get back to the normal version of my site, disable cookies or follow
this link:

http://www.goddamn.co.uk/tobyink/setstyle.php?style=default

Which is also a two-column layout, but probably wouldn't be as useful as
an example.
 
K

kchayka

Toby said:
Not entirely sure if I've explained it well, but here is an example
(beware: requires cookies, fixed 800px width design)

http://www.goddamn.co.uk/tobyink/setstyle.php?style=modern
Click to expand...

Unfortunately, this particular example does poorly at smaller window
sizes. Most sites that use images for the background set column widths
in px units. I recently did one that works quite well with % widths.
Being scalable is a definite plus, methinks. Here's a trimmed-down version:
<URL:http://accessat.c-net.us/test/template-2col.html>
 
J

John Latter

Unfortunately, this particular example does poorly at smaller window
sizes. Most sites that use images for the background set column widths
in px units. I recently did one that works quite well with % widths.
Being scalable is a definite plus, methinks. Here's a trimmed-down version:
<URL:http://accessat.c-net.us/test/template-2col.html>
Click to expand...

That looks a pretty neat design kchayka, can anyone use it?

--

John Latter

The 'Socially Acceptable Violence' website:
http://members.aol.com/jorolat/sac.html

Model of an Internal Evolutionary Mechanism
http://members.aol.com/jorolat/TEM.html
 
J

John C

Unfortunately, this particular example does poorly at smaller window
sizes. Most sites that use images for the background set column widths
in px units. I recently did one that works quite well with % widths.
Being scalable is a definite plus, methinks. Here's a trimmed-down version:
<URL:http://accessat.c-net.us/test/template-2col.html>
Click to expand...

Your h1 style includes: position: relative; /* needed for IE6 */
Could you either point me to a resource, or explain, the circumstances
when that is required and why? I see what happens without it, the heading
seems to just disappear (I assume it's actually just somewhere off the
canvas?). I just can't figure out why, or whether it's only needed when
h1 is inside a div, or inside a div with certain characteristics, or also
applicable to other elements besides h*. And I thought a "relative"
declaration was usually accompanied by an offset like top:1em. Whenever I
think I'm getting close to CSS enlightenment, something like this comes
up! Thanks for any help!
 
K

kchayka

John said:
Your h1 style includes: position: relative; /* needed for IE6 */
Could you either point me to a resource, or explain, the circumstances
when that is required and why?
Click to expand...

It's related to IE6 bugs with floated elements. Invisible text is a
symptom, relative positioning of various elements is a pretty reliable
solution, but beware of potential negative effects in other browsers.
Use with caution and test thoroughly.

A good reference for the bug is
<URL:http://www.positioniseverything.net/explorer/peekaboo.html>
 
K

kchayka

John said:
That looks a pretty neat design kchayka, can anyone use it?
Click to expand...

No - it's a secret. I'm now going to employ vulcan mind meld techniques
to make you purge your cache and forget you ever saw it. ;)

Actually, I'll probably tweak it some more and spruce up the comments a
bit before the day is out. I'll leave the page out there indefinitely.

Have at it. :)
 
J

John C

It's related to IE6 bugs with floated elements. Invisible text is a
symptom, relative positioning of various elements is a pretty reliable
solution, but beware of potential negative effects in other browsers.
Use with caution and test thoroughly.

A good reference for the bug is
<URL:http://www.positioniseverything.net/explorer/peekaboo.html>
Click to expand...

Good lord. Did you write first, then test, then say "crap, bitten
by the bug" and add the position:relative to fix it? Or did you just know
from experience that you were gonna need the fix? Acquiring the ability
to keep all these bugs, fixes and hacks in my head seems insurmountable.
I can mostly follow the peekaboo example you cited, except for how come
the bug doesn't affect your h2's.

Also, in your templates, if you take
background: #fff5e1 url(2col-bg2.png) 75% 0 repeat-y;
out of .wrapper and put it in .main, then position:relative can be
deleted from h1 and the bug doesn't strike. At least on my downloaded
version, which doesn't have that .png file.
 
K

kchayka

John said:
Good lord. Did you write first, then test, then say "crap, bitten
by the bug" and add the position:relative to fix it? Or did you just know
from experience that you were gonna need the fix?
Click to expand...

I actually first ran into this nasty thing almost a year ago. It bit me
hard and now seems to follow me wherever I go. Every time I use floats
I expect it to rear its ugly head, but I don't add position:relative
unless I see a problem.
Also, in your templates, if you take
background: #fff5e1 url(2col-bg2.png) 75% 0 repeat-y;
out of .wrapper and put it in .main, then position:relative can be
deleted from h1 and the bug doesn't strike. At least on my downloaded
version, which doesn't have that .png file.
Click to expand...

I've done some more testing since I first posted the page. The
position:relative caused some undesireable effects in Win/Mac IE5, so I
changed a few things around, plus added more comments. I ended up
moving the bg image to .main, too.

I'm done tweaking it now, I think.
 
J

John C

I've done some more testing since I first posted the page. The
position:relative caused some undesireable effects in Win/Mac IE5, so I
changed a few things around, plus added more comments. I ended up
moving the bg image to .main, too.

I'm done tweaking it now, I think.
Click to expand...

It's nice, and the comments are lights in the night for folks like me.
Good teaching example. Thanks! Seems like a challenge sometimes to keep
the 4.01strict/css faith. But in the end, it feels good. Kinda like that
first frameset when NS 2.0 came out, eh? ;-)
 
J

John Latter

No - it's a secret. I'm now going to employ vulcan mind meld techniques
to make you purge your cache and forget you ever saw it. ;)

Actually, I'll probably tweak it some more and spruce up the comments a
bit before the day is out. I'll leave the page out there indefinitely.

Have at it. :)
Click to expand...

Thankyou - I'll see what I can learn from it, although as a newbie I
must say that designing even a simple page layout seems fraught with
unseen difficulties (I ain't got no confidence at all at the moment!).

--

John Latter

The 'Socially Acceptable Violence' website:
http://members.aol.com/jorolat/sac.html

Model of an Internal Evolutionary Mechanism
http://members.aol.com/jorolat/TEM.html
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Interfering CSS 1
Help with Visual Lightbox: Scripts 2
Working on mobile css menu with plenty of frustration! 2
Need assistance finetuning HTML, CSS, Javascript - sticky header issue 3
Closing an overlay outside the overlay as well 1
How can I add arrows to my FAQ 0
Help with my responsive home page 2
Dropdown menu in a fixed navbar 2

Members online

No members online now.
Total: 30 (members: 1, guests: 29)
Robots: 349

Forum statistics

Threads
473,769
Messages
2,569,582
Members
45,065
Latest member
OrderGreenAcreCBD

Latest Threads

Top