Can the pink div (link3/link4) start at the same top position as the div (link1/link2)?
Or do I still need a wrapper div for the left button bar, TreeDiv, and another one for the right button bar + DataGridDiv?
CSS
html
{
background-color:Yellow;
margin: 0;
padding: 0;
height:100%;
}
body {
background-color:Green;
color: #333;
font-size: .85em;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
margin: 10;
padding: 0;
height:100%;
}
a:link, a:visited,
a:active, a:hover {
color: #333;
outline: none;
padding-left: 3px;
padding-right: 3px;
text-decoration: underline;
}
a:hover {
background-color: #c7d1d6;
}
#TreeWrapper{
background-color:Aqua;
float:left;
width:200px;
height:100%;
overflow:auto;
}
#DataGridWrapper{
background-color:Silver;
height:100%;
overflow:auto;
}
.clear
{
clear:left;
}
#DataGridButtonBar
{
background-color:Fuchsia;
}
#TreeButtonBar
{
width:200px;
background-color:Maroon;
}
HTML:
<div id="TreeButtonBar">
@Html.ActionLink("link1", "AddNode")
@Html.ActionLink("link2", "DeleteNode")
</div>
<div id="TreeWrapper">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
</div>
<div id="DataGridButtonBar">
@Html.ActionLink("link3", "AddTeststep")
@Html.ActionLink("link4", "DeleteTeststep")
</div>
<div id="DataGridWrapper">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
</div>
<div class="clear"></div>