This question already has answers here:
Two divs side by side - Fluid display [duplicate]
(9 answers)
Closed 2 years ago.
I am trying to create two columns like a news paper that will be side by side on my webpage. It is basic html. Each column starts with an h1 tag and then the body of the column is a p tag with a few sentences. What css stylers would be best to achieve this?
Specially you can use multi column for newspaper style.
.newspaper {
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
}
<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-count property.</p>
<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>
The CSS3 multi-column layout allows easy definition of multiple columns of text - just like in newspapers
Related
I would like to add a newspaper look to an HTML page to print a PDF report based on it. One issue I ran into is that I have difficulties to automatically break a text to a "new page" (that is another div (?)) when I set a defined height to the text container .newspaper. My current code uses the CSS Multi-column Layout. Here, even though I set the property column-count: 3 it adds a fourth column when it exceeds the available space.
What I would need is that the remaining text that cannot go into the third column continues in the first column again, but under the current text. Is this possible in a HTML setup?
.newspaper {
column-count: 3;
column-gap: 40px;
column-fill: auto;
height: 525px;
position: relative;
padding-top: 125px;
break-after: auto;
}
.newspaper div {
position: absolute;
top: 0;
right: 0;
height: 100px;
width: calc(66% - 10px);
}
p {
margin: 0;
padding: 0;
line-height: 25px;
text-align: justify;
}
p:first-of-type {
margin-top: -125px;
}
<h2>This is such a nice headline!</h2>
<div class="newspaper">
<div><span style="text-align: left">Fig. 1: A black box</span><svg width="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" title="figure1"><rect width="450" height="50" fill="black"></rect></svg></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
Yes, you do. Wrap a .newspaper div into .main div and add specific height into that.
.main {
height: 525px;
overflow:auto;
padding: 10px;
}
.newspaper {
column-count: 3;
column-gap: 40px;
column-fill: auto;
position: relative;
padding-top: 125px;
break-after: auto;
}
.newspaper div {
position: absolute;
top: 0;
right: 0;
height: 100px;
width: calc(66% - 10px);
}
p {
margin: 0;
padding: 0;
line-height: 25px;
text-align: justify;
}
p:first-of-type {
margin-top: -125px;
}
<h2>This is such a nice headline!</h2>
<div class="main">
<div class="newspaper">
<div><span style="text-align: left">Fig. 1: A black box</span><svg width="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" title="figure1"><rect width="450" height="50" fill="black"></rect></svg></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
As an alternative, you may set a column-width to keep it easily readable and use mediaqueries to help it being responsive. It will span your content from 1 to X columns depending on the width avalaible of your media screen.
here an example to play with: ( or to fork https://codepen.io/gc-nomade/pen/ZExPJWZ )
note mediaqueries are used only because of your spanning element , column-width used on its own do not require mediaquerie to be responsive. To see behavior, run the snippet in fullpage mode, then resize your browser's window.
* {
box-sizing: border-box;
}
html {
--colSize: 15em;
--colGap: 40px;
--colbound: calc(100vw - (var(--colGap) + var(--colSize) * 2));
}
.newspaper {
column-width: var(--colSize);
column-gap: var(--colGap);
position: relative;
padding-top: 100px;
break-after: auto;
}
.newspaper div {
position: absolute;
top: 0;
right: 0;
width: var(--colbound);
left: calc(var(--colSize) + var(--colGap));
min-width: var(--colSize);
height: 100px;
white-space: nowrap;
margin: auto;
overflow: hidden;
}
p {
margin: 0;
padding: 0;
line-height: 25px;
text-align: justify;
}
p:first-of-type {
margin-top: -100px;
}
#media screen and (max-width: calc( 30em + 40px + 2em)) {
.newspaper div {
position: static;
width: 100%;
}
.newspaper p:first-of-type {
margin-top: 0;
}
}
<h2>This is such a nice headline!</h2>
<div class="newspaper">
<div><span style="text-align: left">Fig. 1: A black box</span><br><svg width="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" title="figure1">
<rect width="100%" height="50" fill="blue"></rect>
</svg></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
In bootstrap4 how to have a MSWORD type multicolumn text flowing
eg in word we have:
In bootstrap4 the below code will craete a two column grid
eg:
<div class="row">
<div class="col-6">
...... some text
</div>
<div class="col-6">
...... text
</div>
</div>
but here manually i have to split the text into two columns
How can this be down more automatically
No need Bootstrap for this, native CSS is enough!
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
column-count: 3;
}
h2 {
column-span: all;
}
</style>
</head>
<body>
<div class="newspaper">
<h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
</div>
</body>
</html>
I am not sure you need Bootstrap, instead CSS can handle this.
CSS Class:
.two-column-text {
column-count: 2;
}
HTML:
<div class="two-column">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.two-column-text {
column-count: 2;
}
</style>
</head>
<body>
<div class="two-column-text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>
</body>
</html>
Reference
I want these columns responsive if the screen size is small i want them to break downwards and adjust width 100% on small screen.
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
-webkit-column-count:2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
text-align:left;
}
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-count property.</p>
<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>
</body>
</html>
You can achieve this using media queries in css.
.newspaper {
-webkit-column-count: 2;
/* Chrome, Safari, Opera */
-moz-column-count: 2;
/* Firefox */
column-count: 2;
text-align: left;
}
/* max-width value depend on at which resolution you need text in single column, As for now to achieve that in mobile I have used 767px */
#media (max-width: 767px) {
.newspaper {
-webkit-column-count: 1;
/* Chrome, Safari, Opera */
-moz-column-count: 1;
/* Firefox */
column-count: 1;
}
}
<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-count property.</p>
<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>
Try this
#media screen and (max-width: 767px)
{
.newspaper {
-webkit-column-count:1; /* Chrome, Safari, Opera */
-moz-column-count: 1; /* Firefox */
column-count: 1;
}
}
i've the below html code
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
-moz-column-count:2;
/* Firefox */
-webkit-column-count:2;
/* Safari and Chrome */
column-count:2;
-moz-column-gap:40px;
/* Firefox */
-webkit-column-gap:40px;
/* Safari and Chrome */
column-gap:40px;
-moz-column-rule:4px outset #ff00ff;
/* Firefox */
-webkit-column-rule:4px outset #ff00ff;
/* Safari and Chrome */
column-rule:4px outset #ff00ff;
}
.newspaper1 {
-moz-column-count:3;
/* Firefox */
-webkit-column-count:3;
/* Safari and Chrome */
column-count:3;
-moz-column-gap:40px;
/* Firefox */
-webkit-column-gap:40px;
/* Safari and Chrome */
column-gap:40px;
-moz-column-rule:4px outset #ff00ff;
/* Firefox */
-webkit-column-rule:4px outset #ff00ff;
/* Safari and Chrome */
column-rule:4px outset #ff00ff;
}
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-rule property.</p>
<div class="newspaper">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</div>
<div class="newspaper1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</div>
</body>
</html>
http://jsfiddle.net/isherwood/29GHW/
here when i run it i get a 2 column layout, followed by 3 column. but here my problem is, in 3 column layout, i want the left column to take 80% of the width and the second column to take 20% of the width, please let me know how do i achieve this.
Thanks
I think that is not possible.
From here:
column-space-distribution
This property describes how to distribute space in the case where CWPB is smaller than the content width of the element.
And column-width-policy
This property describes how to interpret 'column-width'. The 'flexible' value indicates that the width of columns can be increased to fill all the available space. The 'strict' value indicates that 'column-width' is to be honored.
They are not implemented in the most of the browsers, and there is nothing specified about fixed percentage in the documentation.
I devised a layout based on this one (from here) - I made freely rearranging the divs possible for a bit of SEO. You can see what I did here (css).
As it is, my layout has one minor bug - in Opera, the viewport doesn't expand to accommodate the footer (i.e. the scrollbar doesn't appear if only the footer is out of view). Otherwise, it works flawlessly in Opera 11, Firefox 4 and IE 8. However, when I uploaded it to the site I'm making it for, (layout css), it turned out that the page looks broken in IE - the left column appears on top of the middle one, and the header doesn't appear until I fiddle with the left column's parameters in IE's developer tools.
So, can anyone help me figure out what breaks the page? I know that this question is more suited for doctype.com, but I can't login there for some reason.
However, I would prefer to have the divs in my HTML source in this order:
Content
Footer
Left column
Right column
Header
I do not need propositions for new layouts. I am trying to understand why this works in IE and this doesn't.
While A-List-Apart is one of my favorite sites, I've found that sometimes their suggested css is not always as cross-browser compatible as one might like it to be. The same layout can be found by Mathew James Taylor that is cross-browser compatible and requires no javascript to pull off. Get ready to wade hip-deep in css, though. This is the css template I use for most of my basic layouts now. I've found it to be extremely flexible once you have analyzed how all of the containers fit together.
http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm
Solution two for SEO:
<div id=siteBox>
<div id=center class=column>
<h1>This is the main content.</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
</div>
<div id=header>This is the header.</div>
<div id=left class=column>
<h2>This is the left sidebar.</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
</div>
<div id=right class=column>
<h2>This is the right sidebar.</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
</div>
<div id=footer>This is the footer.</div>
</div>
When faced with a difficult engineering problem, be it programming, web design, or electronics, often the most successful method (for me at least) is the 'outside-in' method. One of the most difficult thinks about it is making yourself use it, since it's "only a little tweak somewhere" that you'll make and fix everything... When I spend a good while looking for that right tweak, I know I should change my approach.
So, starting from scratch, I rebuilt a copy of index.php, pasting bits from the broken original in order to figure out what breaks stuff. And, sure enough, it turned out that the culprit was... the DOCTYPE, something I never paid much attention to - since I only recently started working on webpages as part of my job, caring about compatibility, etc. I slapped a XHTML 1.0 Transitional doctype instead of the original HTML, and it worked like a charm.
Thanks to everyone who helped and especially to #Magnum for his effort.
(: