Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > CSS columns problem - faux columns don't work

Reply
Thread Tools

CSS columns problem - faux columns don't work

 
 
henrybranson@hotmail.com
Guest
Posts: n/a
 
      11-21-2005
I'm trying to achieve a multi-column layout in CSS where the columns
are all of equal length irrespective of the content in them. I've tried
to implement Dan Cederholm's faux columns solution but it doesn't work.

Here's my code - what am I doing wrong?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--

body {
color: #7F7F7F;
font: normal 0.70em/1.6em Verdana, Arial, sans-serif;
margin: 0;
padding: 0;
}

#container {
background: #fff56b url("bg.gif") repeat-y 0 0;
float: left;
width: 780px;
background-color: #FFF;
border: 1px dotted #000;
}
#column1, #column2, #column3, #column4 {
width: 25%;
background-color: #CCFFCC;
float: left;
}

#clear {
clear:both;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="column1">content</div>
<div id="column2">Alternatively, if borders or padding can be avoided
altogether by just using margins instead, then the the Box Model Hack
will not be necessary. And if the column's content is simply sitting
(transparently) on top of the tiled background, then it should be easy
to avoid the hack.
</div>
<div id="column3">content</div>
<div id="column4">Alternatively, if borders or padding can be avoided
altogether by just using margins instead, then the the Box Model Hack
will not be necessary. And if the column's content is simply sitting
(transparently) on top of the tiled background, then it should be easy
to avoid the hack. Alternatively, if borders or padding can be avoided
altogether by just using margins instead, then the the Box Model Hack
will not be necessary. And if the column's content is simply sitting
(transparently) on top of the tiled background, then it should be easy
to avoid the hack.
</div>
<div id="clear"></div>
</div>
</body>
</html>

 
Reply With Quote
 
 
 
 
dorayme
Guest
Posts: n/a
 
      11-22-2005
> From: http://www.velocityreviews.com/forums/(E-Mail Removed)
>
> I'm trying to achieve a multi-column layout in CSS where the columns
> are all of equal length irrespective of the content in them. I've tried
> to implement Dan Cederholm's faux columns solution but it doesn't work.
>
> Here's my code - what am I doing wrong?
>


I had a fiddle and changing the width to just less than 25% for
the cols made them behave better, seems borders are taking up
space not leaving room for your specs... or you can have no
borders and no padding and leave your specs (looks awful but...)

Why don't you stop messing about and use a goddamn table and be
done. I didn't mean that. It just came all blurting out from the
subconscious. One really must restrain oneself in church...

--
dorayme

 
Reply With Quote
 
 
 
 
Neredbojias
Guest
Posts: n/a
 
      11-22-2005
With neither quill nor qualm, (E-Mail Removed) quothed:

> I'm trying to achieve a multi-column layout in CSS where the columns
> are all of equal length irrespective of the content in them. I've tried
> to implement Dan Cederholm's faux columns solution but it doesn't work.
>
> Here's my code - what am I doing wrong?


Nothing. That's the way css works. Your "length" is really height and
no parent height is established. Furthermore, the height you want is
not a parent.

--
Neredbojias
Contrary to popular belief, it is believable.
 
Reply With Quote
 
Jim Higson
Guest
Posts: n/a
 
      11-22-2005
(E-Mail Removed) wrote:

> I'm trying to achieve a multi-column layout in CSS where the columns
> are all of equal length irrespective of the content in them. I've tried
> to implement Dan Cederholm's faux columns solution but it doesn't work.
>
> Here's my code - what am I doing wrong?


If it isn't important that it works everywhere, Firefox 1.5 can do columns
with CSS3-like rules, and the final version should be out very soon.

see http://weblogs.mozillazine.org/roc/a...18_for_we.html


 
Reply With Quote
 
henrybranson@hotmail.com
Guest
Posts: n/a
 
      11-24-2005
Thanks dorayme - and others

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Faux colums paint refresh problem. Pirolla HTML 1 04-18-2011 01:41 PM
CSS: a simple layout won't work in CSS liketofindoutwhy@gmail.com HTML 29 03-21-2008 03:46 PM
Faux-paging with my datalist, visibility, and XmlDataSource? ASP .Net 0 06-29-2007 12:35 AM
problem with table in div (faux column template) monkeymynd HTML 7 03-21-2007 06:01 PM
CSS Columns Problem sethmac HTML 0 10-31-2006 08:21 PM



Advertisments