Text columns with CSS

Hi there, I'm new here so take it easy on me! Smile

Ok so I'm trying to create 3 columns of text with css and thus far i've come across the following code:

.three-col {
       -moz-column-count: 3;
       -moz-column-gap: 20px;
       -webkit-column-count: 3;
       -webkit-column-gap: 20px;

and the html is like this:

Layout Issue

I am having trouble with a two-column layout on a page I am designing. Originally I tried with a right sidebar and everything worked fine. This can be seen here http://nametest.weserver.org/nikripken/index.php. I then tried to swap to a left sidebar and the main content is not displaying until after the content of the sidebar. I am sure this is a simple CSS mistake in swapping the 2 sides, but if anyone can give me some pointers that would be great. Here is a link to the second attempt http://nametest.weserver.org/nikripken/index3.php


3 column layout issue

so i'm having trouble making a 3 column layout on my site. the page in question is here:


i'm using a customized template, and here's what i've got in the text field in the backend:

The Routine Machine
This app lets you create and share your morning routine with your friends. Spray-on deodorant, moustache comb, spot of tea, etc. Then you can browse your friends' routines and make fun of them for using Axe body spray.

Help with my Columns

Hi There,
I am seeking a little help with my columns. I wish to have a fixed width left column and an auto sized right column. This way, on smaller screens my right column will shrink to fit the content.

I have tried a bunch of things, but nothing seems to work correctly. Any thoughts?

Thank You!

Here is my css code for my columns (also here: http://saltsidedownchocolates.com/templates/ja_purity/css/template.css):

#columns {
	width: 625px;
#columns .column {
	position: relative;
	padding: 0px;
	border: solid 0px #000;
#columns .left{

Column container trickery in Chrome

I've been designing and developing a website for a client. I've created a basic two-column layout, the columns are divs which are contained in a single larger div. The columns show up perfectly but the container only extends about 30 or so pixels down the page, were it stops, but the columns keep going. I want the container to actually contain both the columns all the way down the page.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">

Syndicate content