I have created this custom layout below: But the middle row (which is a div side by side ) doesn't stick under the header(top left and top right) THe header has a white space below it and just pushes the middle row down. I want to have
top left top right and then under it just have the middle row with 2 divs side by side.
It seems i'm missing something any advice will be appreciated
<div id="s-home">
<div id="s-home-header-row">
<!-- Top Row -->
<div id="s-home-header">
<!-- Top Left -->
<WebPartPages:WebPartZone runat="server" Title="Top Left" ID="Header" FrameType="None"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>
</div>
<div id="s-home-topright">
<!-- Top Right -->
<WebPartPages:WebPartZone runat="server" Title="Top Right" ID="TopRight" FrameType="None"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>
</div>
</div>
<!-- Middle Row -->
<div id="s-home-middle-row">
<div id="s-home-leftcolumn">
<WebPartPages:WebPartZone runat="server" Title="Middle Left" ID="LeftColumn" FrameType="TitleBarOnly"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>
</div>
<div id="s-home-middlecolumn">
<WebPartPages:WebPartZone runat="server" Title="Middle Center" ID="MiddleColumn" FrameType="TitleBarOnly"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>
</div>
</div>
<div id="s-home-footer-row">
<!-- Footer -->
<WebPartPages:WebPartZone runat="server" Title="Footer" ID="Footer" FrameType="TitleBarOnly"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>
</div>
</div>