Question

I am trying to display a page that contains a header with 3 list items, a sidebar with links on the left and the actual body. I would like the sidebar and the body to be rendered side by side under the header. However, they are rendered one after another on the page.
Any suggestions on how this can be done?

I’ve used the following code and style to achieve this, but it doesn’t seem to be working.

<div>  
    <h1 class="control-label admin-header" style="vertical-align:top;padding-left:20px">Administration</h1>
    <ul class="nav nav-pills admin-header" style="float:right">
        <li class="active admin-header"><a href="http://localhost:10004/test">test</a></li>
        <li class="admin-header"><a href="http://localhost:10004/xyz">xyz</a></li>
        <li class="admin-header"><a href="https://localhost:10004/abc">abc</a></li>
    </ul>
    </div>
    <div>
    <div class="span3 admin-header">
        <div class="well sidebar-nav admin-header">@RenderSection("Sidebar", false)</div>
    </div>
    <div class="content span12 admin-header">@RenderBody()
    </div>
    </div>

.admin-header
{
    display: inline;
}​

Fiddle

Answer 1

Not sure whether I understood, but for side by side display, you can use

<table>
<tr>
<td class="active admin-header"><a href="http://localhost:10004/test">test</a></td>
<td class="admin-header"><a href="http://localhost:10004/xyz">xyz</a></td>
<td class="admin-header"><a href="http://localhost:10004/xyz">abc</a></td>
</tr>
</table>