homepage Welcome to WebmasterWorld Guest from 107.20.25.215
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS Columns
l008comm




msg:4220248
 10:37 am on Oct 22, 2010 (gmt 0)

I need some help whipping up some CSS columns. BUTUTUTUT I'm not talking about full page, "layout" columns. What I need are small multi-column objects (you know, like tables) that I can stick all around my pages. Like tables, I need these objects to fill the available space width site (table width=100%), while each column also has it's width set by percentage.

I feel like I'm not explaining this well, but I'm not sure how else to do it.
Basically I have a 3 column table embedded in a cell of another table. I want to replace the 1x3 table with all CSS, but I want to keep the primary table.

 

SuzyUK




msg:4220276
 11:48 am on Oct 22, 2010 (gmt 0)

take a look at inline-blocks, you can set up 3 spans or divs - though with divs, or any other block level element (e.g. ul';s) it would need a wee IE hack for versions prior to 8 IIRC.
in short three divs (or any other element that is already in use!) should display side by side if they are give the CSS property
display: inline-block; if you then also give them a 33% width you should have 3 equal "columns" in theory ;) - remember with lists the math might be different due to their natural margin/padding!

if using IE < 8 to get a block to accept the inline-block property you need to trip the display property back to "inline" this second rule needs to be seen by lt<8 only and if using a parse hack it still needs to be in a separate ruleset
e.g.
div.ib {display: inline-block;}
div.ib {*display: inline;}

here's an example using lists as the vertical columns.. with both ways of feeding the IE rule (I prefer the conditional ;))

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Page Title </title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css" media="screen">
table {
width: 100%;
border-collapse: collapse;
border: 0;
table-layout: fixed;
}
td {border: 1px solid #000; padding: 5px; vertical-align: top;}

td ul {
display: inline-block;
vertical-align: top;
list-style: none;
margin: 0;
padding: 0;
border: 1px solid #f00;
width: 32%;
}

td ul {*display: inline;} /* parse hack version, or see conditional below */
</style>

<!--[if lt IE 8]>
<style type="text/css" media="screen">
td ul {
display: inline; /* this is to make inline-block work on block elements versions <IE8 */
margin-right: 3px; /* and this is to simulate the natural 3px spacing that happens between inline-block elements */
}
</style>
<![endif]-->

</head>
<body>
<table summary="" cellspacing="0">
<tr>
<td>one</td>
<td>
<ul><li>one</li><li>two</li><li>three</li></ul>
<ul><li>one</li><li>two</li><li>three</li><li>four</li></ul>
<ul><li>one</li><li>two</li></ul>
</td>
<td>three</td>
</tr>
</table>
</body>
</html>

l008comm




msg:4220297
 12:28 pm on Oct 22, 2010 (gmt 0)

Is there a way I can get rid of that 3 pixel right side margin on my columns? margin: 0px doesn't seem to have any effect on it.

l008comm




msg:4220344
 1:54 pm on Oct 22, 2010 (gmt 0)

Seems like I'm getting a little bit of odd top spacing too. Any thoughts on all the spacing?

l008comm




msg:4220412
 3:29 pm on Oct 22, 2010 (gmt 0)

AAAAAAND one more question. Is there a way to auto-balance the columns? That is, have the column set fill the whole width, but have each column width auto size based on content? The same way a table would, if you specified the table width as 100%, but no cell widths?

SuzyUK




msg:4220420
 3:45 pm on Oct 22, 2010 (gmt 0)

Is there a way I can get rid of that 3 pixel right side margin on my columns? margin: 0px doesn't seem to have any effect on it.

Yep.. set it to be margin-right: -3px; and change the IE one to 0 (zero)

Seems like I'm getting a little bit of odd top spacing too. Any thoughts on all the spacing?

possibly the different table padding rendering? - though most likely the real inline-blocks also have top/bottom leading, they basically act like a word or an inline image, any inline element allows 3-4px top and bottom spacing which would be the normal spacing for ascenders and descenders of letters like b, y etc.. i.e. the "line-height" bit - it could be that?

AAAAAAND one more question. Is there a way to auto-balance the columns? That is, have the column set fill the whole width, but have each column width auto size based on content? The same way a table would, if you specified the table width as 100%, but no cell widths?

No I don't think so, percentages is about the best you could get..

I don't think the CSS Column module which would solve all the above and more is ready for widespread use yet.., so (and pssst.. don't say I said but) why not just use the table it's probably less markup ;)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved