Question

I’m trying to create a layout like so:

On the left hand side I want to add an ASP.NET TreeView control. Unfortunately, it seems to render as a div, so it causes a line break. I don’t think I can use display:inline, as this doesn’t seem to work:

 <asp:TreeView ID="TreeView1" runat="server" style="display:inline;"
            onselectednodechanged="TreeView1_SelectedNodeChanged" 
            ontreenodepopulate="TreeView1_TreeNodePopulate" 
            ontreenodeexpanded="TreeView1_TreeNodeExpanded">
            <SelectedNodeStyle Font-Bold="True" Font-Underline="True" />
    </asp:TreeView>

My markup is as follows:

<div id="mainDiv">
    <div id="filters">

    </div>
    <div id="dMiddle">
    <span id="sTreeView">
     <asp:TreeView ID="TreeView1" runat="server" style="display:inline;"
            onselectednodechanged="TreeView1_SelectedNodeChanged" 
            ontreenodepopulate="TreeView1_TreeNodePopulate" 
            ontreenodeexpanded="TreeView1_TreeNodeExpanded">
            <SelectedNodeStyle Font-Bold="True" Font-Underline="True" />
    </asp:TreeView>
    </span>
    <span id="sGrid">eventually a grid...</span>
    </div>
</div>

The issue is the TreeView causes a line break instead of staying in its span (or div or wherever I put it).

Is there any way around this?

Answer 1

I would just use three <div>s (rather than the <span>s you have now). Like this:

<div id="mainDiv">
    <div id="filters">
        Some other stuff goes up here
    </div>
    <div id="dMiddle">
        <asp:TreeView ID="TreeView1" runat="server"
                onselectednodechanged="TreeView1_SelectedNodeChanged" 
                ontreenodepopulate="TreeView1_TreeNodePopulate" 
                ontreenodeexpanded="TreeView1_TreeNodeExpanded">
                <SelectedNodeStyle Font-Bold="True" Font-Underline="True" />
        </asp:TreeView>
    </div>
    <div id="sGrid">
        Eventually a Grid goes here
    </div>
</div>

Then all you need is a little CSS on your <div>s:

#sGrid, #dMiddle { display:inline-block; }
#dMiddle { float:left; }

The first line there makes sure your dMiddle and sGrid <div>s stay on the same line together (no forced line break).

The second line is optional, and just floats the TreeView‘s <div> to the left (It seems to line the two inline <divs>s up nicely).