Today's Posts Follow Us On Twitter! TFL Members on Twitter  
Forum search: Advanced Search  
Navigation
Marketplace
  Members Login:
Lost password?
  Forum Statistics:
Forum Members: 24,256
Total Threads: 81,169
Total Posts: 566,839
There are 37 users currently browsing (tf).
 
  Our Partners:
 
  TalkFreelance     Design and Development     HTML/XHTML/DHTML/CSS :

Is this good column css structure?

Thread title: Is this good column css structure?
Reply    
    Thread tools Search this thread Display Modes  
12-02-2011, 04:12 AM
#1
jasonm56 is offline jasonm56
jasonm56's Avatar
Status: I love this place
Join date: Jun 2007
Location: Minneapolis
Expertise: xhtml/css, jquery, php, mysql
Software:
 
Posts: 533
iTrader: 1 / 100%
 

jasonm56 is on a distinguished road

Send a message via MSN to jasonm56

  Old  Is this good column css structure?

I haven't been doing any css work in the last year or so and I started doing some websites with a ton of columns. I was wondering if my code would be considered good/clean. Is this an industry standard or could it be made better/more compatible?

Code:
.col3, .col3_last{
	width: 320px;
	height: 160px;
	background: #ccc;
	float: left;
}
.col3 {
	margin: 0 10px 10px 0;
}
Now my reasoning is that there will be 3 col in a row. I want to have the 10px spacing between col 1&2 and another 10 between col2&3. I DO NOT want the last col in each row to have 10px margin.

What would you change? What is the industry standard for naming columns these days (I never had a formal way of naming them)?

12-08-2011, 08:57 PM
#2
derek lapp is offline derek lapp
Status: design rockstar
Join date: Jan 2005
Location: guelph, ontario
Expertise:
Software:
 
Posts: 2,246
iTrader: 0 / 0%
 

derek lapp is on a distinguished road

  Old

Originally Posted by jasonm56 View Post
I haven't been doing any css work in the last year or so and I started doing some websites with a ton of columns. I was wondering if my code would be considered good/clean. Is this an industry standard or could it be made better/more compatible?

Code:
.col3, .col3_last{
	width: 320px;
	height: 160px;
	background: #ccc;
	float: left;
}
.col3 {
	margin: 0 10px 10px 0;
}
Now my reasoning is that there will be 3 col in a row. I want to have the 10px spacing between col 1&2 and another 10 between col2&3. I DO NOT want the last col in each row to have 10px margin.

What would you change? What is the industry standard for naming columns these days (I never had a formal way of naming them)?
it's close enough. it's the same approach i take. i prefer to get away from having multiple class names though - it's not very practical if you're working with some kind of cms where you don't have absolute control over what html is output. imo, a safer approach would be something like:

Code:
.col3
{
display: inline /*for ie 6. margins are automatically doubled on floated blocks, and i have no clue why */
float: left;
width: 320px;
background: #ccc;
margin: 0 10px 10px 0;
}
.col3:last-child,
.col3.last /* again, for IE */
{
margin: 0 0 10px 0;
}
i use :last-child as a fall back instead of manually attaching a separate class myself - useful for looped content and avoids writing any conditional statements. the catch is IE doesn't support it, but i rely on javascript to attach it instead of going into my actual core/template code:

Code:
// uses jquery
// i user the html5 boilerplate method for handling conditional IE css
jQuery(document).ready(function() {
jQuery(".ie6 .col3:last-child, .ie7 .col3:last-child, .ie8 .col3:last-child").addClass('last');
}
with this method, you only have to deal with adding the extra class when it's needed.

04-11-2012, 04:52 PM
#3
derek lapp is offline derek lapp
Status: design rockstar
Join date: Jan 2005
Location: guelph, ontario
Expertise:
Software:
 
Posts: 2,246
iTrader: 0 / 0%
 

derek lapp is on a distinguished road

  Old

that's how i do it. it's pretty intuitive. especially with a grid:

col = column // apply generic traits like padding, color, etc
col4 = 1/4 width column, apply width restriction

what would he use instead?

Reply With Quote
Reply    


Thread Tools
Display Modes

  Posting Rules  
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump:
 
  Contains New Posts Forum Contains New Posts   Contains No New Posts Forum Contains No New Posts   A Closed Forum Forum is Closed