Question : Three CSS cells next to each other

I am making an expandable/collapsible panel using jQuery, that will be an ASP.NET custom control.

It consists of a header and a content area. Simple enough.

The problem I have is that the header has to have three sections adjacent to each other.

A left-aligned title, next a right-aligned text area for extra information, and next to that an area where I can put the collapse/expand arrow.

For the life of me, I cannot figure out how to do this. The control's width can be in pixels or percent.

Will three spans in a div work? Or is it three divs in a div? I don't know what to do.

Can one of you awesome experts give me an example of the markup and CSS that would allow me to accomplish this?

Cheers!

Answer : Three CSS cells next to each other

Hi hehdaddy,
Three spans, Three Divs, both would would but you need to float them accordingly and place all the three within a header div and add the expand/collapse event on the header div.

I've written up a quick example for you below, hope it helps

Cheers

                       
         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:

           
           
             <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Collapse/Expand Example</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
    <style type="text/css">
        /*CollapsiblePanel*/
        .ContainerPanel
        {
            width: 400px;
            border: 1px;
            border: solid 1px #1052a0;
        }
        .collapsePanelHeader
        {
            width: 400px;
            height: 30px;
            font-weight: bold;
        }
        .HeaderContent
        {
            padding-left: 5px;
        }
        .leftText {float:left;}
        .rightText {float:right;}
        .ArrowExpand
        {
            background-image: url(http://www.dps.state.al.us/images/menu/ExpandArrow.gif);
            width: 13px;
            height: 13px;
            float: right;
            margin-top: 7px;
            margin-right: 5px;
        }
        .ArrowClose
        {
            background-image: url(http://delphi.com/images/app/productIndustry/navExpandArrow.gif);
            width: 13px;
            height: 13px;
            float: right;
            margin-top: 7px;
            margin-right: 5px;
        }
    </style>
    <script type="text/javascript">
            $(document).ready(function() {
                $("DIV.ContainerPanel DIV.collapsePanelHeader").toggle(
                function() {
                    $(this).next("div.Content").show(300);
                    $("span.ArrowExpand").attr("class", "ArrowClose");
                },
                function() {                   
                    $(this).next("div.Content").hide(300);
                    $("span.ArrowClose").attr("class", "ArrowExpand");
                });             
            });           
    </script>
</head>
<body>
    <div id="ContainerPanel" class="ContainerPanel">
        <div class="collapsePanelHeader">
            <span class="ArrowExpand"></span>
            <span class="rightText">Right Text</span>
            <span class="leftText">Left Text</span>
        </div>
        <div id="dvContent" class="Content" style="display: none">
            /*Contents go here.. */
        </div>
    </div>
</body>
</html>

           
         