set different widths within single class

Hi All,

my next dilemma (following http://codingforums.com/showthread.php?t=199070) having created my new page template to include Page Boxes, I want to be able to set a specific width for each individual box rather than a single width for all boxes.

here's the relevant bit from my css:



#page-box-wrapper {}

.page-box {
width:150px;
float:left;
margin:40px 0px 20px 0px;
}

.page-box img {
float:left;
margin:6px 10px 5px 0px;
padding:1px 1px;
background:#EEE;
border:1px solid #CCC;
}

.page-box h3 {
margin-bottom:20px;
margin-top:0px;

}

.page-box ul li {
margin:0px 0px 5px 0px;
padding:0px 0px 0px 20px;
line-height:25px;
display:block;
list-style-type: none;
font-size:12px;
color:#767676;
background:url(images/widget-list-bg.gif) scroll transparent no-repeat;
background-position:0px 8px;
}

.page-box ul li a {
padding:4px 0px;
font-style:italic;
letter-spacing:1px;
}

.page-box ul li a:hover {
border-bottom:1px dotted #767676;
}

.page-box ul li ul {
margin-top:10px;
}


and, not sure this helps but here's the code from the php:


<div id="page-boxes-wrapper">

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Page Boxes") ) : ?>Default right sidebar stuff here?

<?php endif; ?>

<div style="clear:both"></div><!-- CLEAR THE FLOATS -->

</div><!-- /page-boxes-wrapper -->


So rather than have a width of 150px, to have widths of 28%, 28% and 44% or 126px, 126px, 198px.

Not sure of the best way to approach this...

Help and thoughts appreciated

Thank you

I've found a temporary solution by changing the class to:


.page-box {
width:auto;
float:left;
margin:40px 30px 20px 0px;
}


the width auto means the text fits well but not exact as I would like it.

Is it possible to have a different class for each box within a sidebar plugin?

Doing something clever with 'before_widget' perhaps?

ok sorry to keep on posting, here's another solution I came up with:

I added a class in my css for the wider box and called it page-box2


#page-box-wrapper {}

.page-box {
width:156px;
float:left;
margin:40px 0px 20px 0px;
}

.page-box img {
float:left;
margin:6px 10px 5px 0px;
padding:1px 1px;
background:#EEE;
border:1px solid #CCC;
}

.page-box h3 {
margin-bottom:20px;
margin-top:0px;

}

.page-box ul li {
margin:0px 0px 5px 0px;
padding:0px 0px 0px 20px;
line-height:25px;
display:block;
list-style-type: none;
font-size:12px;
color:#767676;
background:url(images/widget-list-bg.gif) scroll transparent no-repeat;
background-position:0px 8px;
}

.page-box ul li a {
padding:4px 0px;
font-style:italic;
letter-spacing:1px;
}

.page-box ul li a:hover {
border-bottom:1px dotted #767676;
}

.page-box ul li ul {
margin-top:10px;
}

.page-box2 {
width:248px;
float:left;
margin:40px 0px 20px 0px;
}

.page-box2 img {
float:left;
margin:6px 10px 5px 0px;
padding:1px 1px;
background:#EEE;
border:1px solid #CCC;
}

.page-box2 h3 {
margin-bottom:20px;
margin-top:0px;

}

.page-box2 ul li {
margin:0px 0px 5px 0px;
padding:0px 0px 0px 20px;
line-height:25px;
display:block;
list-style-type: none;
font-size:12px;
color:#767676;
background:url(images/widget-list-bg.gif) scroll transparent no-repeat;
background-position:0px 8px;
}

.page-box2 ul li a {
padding:4px 0px;
font-style:italic;
letter-spacing:1px;
}

.page-box2 ul li a:hover {
border-bottom:1px dotted #767676;
}

.page-box2 ul li ul {
margin-top:10px;
}


I updated functions.php with


if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Page Box2',
'before_widget' => '<div class="page-box2">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));


and I updated my page template


<div id="page-boxes-wrapper">

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Page Boxes") ) : ?>Default right sidebar stuff here?

<?php endif; ?>

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Page Box2") ) : ?>Default right sidebar stuff here?

<?php endif; ?>

<div style="clear:both"></div><!-- CLEAR THE FLOATS -->

</div><!-- /page-boxes-wrapper -->


I still feel a clever solution using 'before_widget' in functions.php to determine which class to use would be neater, but this is good for now.