Is it possible to align RadDockZones into 3 columns using CSS and not tables?

[Yevgeniya]

Hi,
I need to align RadDockZones into 3 columns using CSS. All of the examples and forum posts use tables to do just the same. I tried the following markup (see below) and expected to see the zones side by side, but instead they appear underneath each other. IE Developer toolbar is showing their display style as BLOCK, even though I set it to INLINE. I've tried creating a custom skin and setting display style to INLINE in .RadDockZone_Gwi2007{}, but still the same result. Am I missing something simple?

<telerik:RadDockLayout ID="RadDockLayout1" runat="server"                     
            Skin="Office2007" 
            EnableEmbeddedSkins="false"  >
   <div style="display:inline" >            
        <telerik:RadDockZone ID="RadDockZone1" runat="server"                              Height="300px"
            Width="300px"
            style="display:inline !important">
        </telerik:RadDockZone>
   </div>
   <div style="display:inline !important" >
         <telerik:RadDockZone ID="RadDockZone2" runat="server"                              Height="300px"
             Width="300px"
             style="display:inline !important">
         </telerik:RadDockZone>
    </div>
    <div style="display:inline">
          <telerik:RadDockZone ID="RadDockZone3" runat="server"                                Height="300px"
               Width="300px"
               style="display:inline !important">
          </telerik:RadDockZone>
     </div>
</telerik:RadDockLayout>

Thanks,
Yevgeniya

[Svetlina Anati]

Hello Yevgeniya,

In order to achieve the desired behavior I suggest to use the RadDockZone's CSSClass property and assign it to a proper CSS class.

For your convenience I am attaching a sample demo which shows how this should be done. Please, note that in case you use the embedded skins, it is necessary to use the keyword !important in order to override the skin. Note, also, that the attached solution is just a custom one and with some skins which have bigger borders you should change the values for the margins in order to meet your requirements.



Greetings,
Svetlina
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Yevgeniya]

Svetlina, thank you for a quick response.

The css example you gave me hardcodes the margins and does not allow for zones to shrink and expand in the event of browser window resizing. It's important for us to have a fluid design where the content adjusts to the size of the browser window so I'm trying to find another way to use CSS to accomplish the same. Do you have any ideas on how to avoid hard-coding of margins? I tried the following, hoping that zones will be displayed inline and therefore will form 3 columns, but it did not work.

<style type="text/css">
    .Test
    {
        display: inline !important;
    }
    .Test1
    {
        display: inline !important;
    }
    .Test2
    {
        display: inline !important;
    }
    </style>

Thanks,
Yevgeniya

[Yevgeniya]

Never mind. I think I got it:

    <style type="text/css">
    .Column1
    {
          float:left !important;
          min-width: 29% !important;
          width: 29% !important;
    }
    .Column2
    {
        float:left !important;
        min-width: 29% !important;
        width: 29% !important;
    }
    .Column3
    {
        float:left !important;
        min-width: 29% !important;
        width: 29% !important;
    }
    </style>