CSS Horizontal Lists

Discussion in 'CSS' started by Drugoholic, Jun 29, 2009.

  1. #1
    Hello everyone,

    I'm using gallery extension for joomla

    Basically what I wanna do is put the 2 tables (2009 and 2008) horizontally beside each other rather than vertically. Here is the code of the page and I really appreciate the help.

    <ul id='rsg2-galleryList'>
            <?php foreach( $kids as $kid ): ?>
                <li class='rsg2-galleryList-item' >
                <?php if ( $rsgConfig->get('displayStatus') ) {?>
                    <div class="rsg2-galleryList-status"><?php echo $kid->status; ?></div>
                    <?php }?>
                    <!--<div class="img-shadow">-->
                        <a class='rsg2-galleryList-thumb' href="<?php echo sefRelToAbs($kid->url); ?>">
                        <?php echo $kid->thumbHTML; ?>
                        </a>
                    <!--</div>-->
                    <div class='rsg2-galleryList-info'>
                        <a class='rsg2-galleryList-title' href="<?php echo sefRelToAbs($kid->url); ?>"><?php echo htmlspecialchars(stripslashes($kid->get('name')), ENT_QUOTES); ?></a>
                        <div class='rsg2-galleryList-totalImages'><?php echo galleryUtils::getFileCount($kid->get('id')). _RSGALLERY_IMAGES;?></div>
                        <div class='rsg2-galleryList-newImages'><?php echo galleryUtils::newImages($kid->get('id')); ?></div>
                        <div class='rsg2-galleryList-description'><?php echo ampReplace($kid->get('description'));?></div>
                        <?php HTML_RSGALLERY::subGalleryList( $kid->get('id') ); ?>
                    </div>
                    <div class='clr'>&nbsp;</div>
                </li>
            <?php endforeach; ?>
            </ul>
    Code (markup):
    So this is what I did, I looked for "rsg2-galleryList-item" and I added the following to it (marked in bold).

    .rsg2-galleryList-item{
        clear: both;
        
        padding: 5px;
        margin: 5px 0 5px 0;
    
        list-style: none;
        background-image: none;
    
        border: 1px solid #ccc;
        [B]display: table-cell;
        list-style-type: none;
        padding: 60px;
        width: 100%;[/B]
    Code (markup):
    It worked with minor bugs. (have a look at the attached photo below)

    How do I fix the alignment of the 2 cells?
     

    Attached Files:

    Drugoholic, Jun 29, 2009 IP