Hi,

I'm trying to create a container that features a row displaying 3 different background images next to each other. I've tried doing this by having 3 elements, one inside the other with each having a different background image in order to achieve this effect.

This looks fine in visual studio but when I view the container on a dot net nuke website, the elements seem to collapse and I don't see the different background colours. Is anyone able to help me with this? I've included the HTML below, the background images are mentioned in the CSS.

Thanks

<!-- div for whole container -->

<div class="cantarus_module_container">
   
<!-- a row that should display 3 different background images by the 3 div elements there -->
  
 <div class="cantarus_module_title" style="clear:both;">         
    <div class="cantarus_module_title_left">   
    <div class="cantarus_module_title_right" style="clear:both;">
    [ACTIONS]   
    [TITLE]
    </div>     
    </div>   
    </div>      
 
 

The divs can be empty.
This is a CSS issue so we'd need to see it on a page, but try giving the central div some dimensions and the outer ones overflow:hidden
Rob

Empty panes (without content) get a class DNNEmptyPane, for which the width is st to 0 in default.css.
If you don't want that you should overwrite this in your skin.css

From default.css:

/* used to collapse panes without any content in them */ 
.DNNEmptyPane { width: 0px; } 

---