I am working with the StarterSite Site template in WebMatrix3. Ideally I would like to alter the layout of the StarterSite to suit my preferences. Towards this end I am trying to create a navigation section on the left, and a main display area on the right.
I have started with the "footer" section which consists of the following markup (notice that the CSS classes "float-left" and "float-right" are used...) -
The resulting browser view is as follows, and the markup-performs as expected...
When I attempt to take the same methodology that is used in the footer and apply it to another content area (defined by the <section> tag) I get very erratic results. Here is the markup that I am using in the hope of putting content to the left and right of the page.
Unfortunately the results displayed in the browser are far from desirable!!!
I have read-up on layouts, and have an understanding of the various method calls, including @renderBody(), @renderPage() and @renderSection(), additionally I have a solid understanding of CSS however I just can't see where I am going wrong here. Although there are both class & id declarations in the style sections above there are no positioning related tags in the #body or #navigator identifiers.
It looks like the 'Navigation content goes here' block is invading the <header> section of the document, however it is definitely declared outside of the header.
If anybody can help me with this challenge it will be greatly appreciated.