Creating Columns in HTML or CSS
kenyabob (303 points) | Fri, 2005-04-08 01:06This might sound like an off question, maybe one with a simple solution, but here it goes. Using either HTML or CSS, is there a way to create columns. My site is vertically challenged, and I would rather the text start to run to the right, flowing into the adjacent box, then to flow downward. Any thoughts?
Commenting on this Forum topic is closed.
you create columns with the flow-attribute:
(with 600pixel wide page)
#menu {
float: right; /* it makes the menu to appear on the right */
width: 147px; /*the width of the menu */
/* maybe no paadding in the container? */
}
#content {
float: right; /* it makes the content to float right */
margin-right: 150px; /* it makes just left of the menu (147=150 explained below) */
}
html>body #menu {
width: 150px; /* ie 3 pixel float bug hack */
}
you can make the menu and content equal in height with the faux columns method:
http://www.alistapart.com/articles/fauxcolumns/
simple two column layout:
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/
my little blog:
http://www.notv.hu
I see what you are getting at, and that seems helpful. However, my issue is how do I make one column flow into the next one. Creating two columns isnt really an issue, its connecting them that I want. Just like linking in inDesign.
I found a w3c article that addressed it perfectly, unfortunately, it seems to be only theoritical at this point:
http://www.w3.org/TR/2001/WD-css3-multicol-20010118/
Also, the following site does achieve this effect, but maybe with javascript?
http://www.iht.com/articles/2005/04/19/news/pope.html
what? it's the opposite. it's exactly the place to ask such questions. :)
agtalpai: Wow! Nice! Now I know who to bug with my CSS questions. ;)
kenyabob: did you already implement it, because the list of menu items are already in two columns. I can't seem to see any flowing text on your site. Can you link a specific page maybe?
I feel slightly embarrassed. My brother designed most of the site as it is now. He's a computer engineer at Santa Clara University, and the whole setup is a bit...terrible. Currently I am trying to redesign it. The only thing I have put together is http://www.titanav.com/preview. I wanted to see if people liked SlideshowPro.
Hopefully in the next few weeks I will put the rest together. Yesterday, I was sketching different layouts for the the site and one was one with columns, and so I wanted to see if it was possible. Seems it is. Thanks guys!