Jump to content

EchoedTruth

Members
 View Profile  See their activity

  • Posts

    2

  • Joined

  • Last visited

 Content Type 

Posts posted by EchoedTruth

    Fixing Section Layout (html5)

    in HTML/XHTML

    Posted

    Google sticky footer. Several CSS techniques need to be combined to make this work. Since the problem has been solved, there's no need to repeat the solution(s) here.
    The footer I found the solution to, thanks for the quick reply :) . My biggest issue is still at hand though: how to get my article/main content to line up next to my nav bar and not above or below it.

    Fixing Section Layout (html5)

    in HTML/XHTML

    Posted · Edited by EchoedTruth

    Hey everyone, I have been scouring the internet trying to solve this layout problem but I haven't found a solution - I want my article section to line up next to my nav bar properly. Using <float> left or right just pushes it above or below the nav bar as you can see here: 

        <!DOCTYPE html>   <html>   <head>    <meta charset="utf-8">    <!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--><title> My Magical World </title>  <style>      html, body { margin: 0px; padding: 0px; border: 0px }    body { background-color: silver }    article { margin: 20px; padding: 15px; border: 2px solid black;  }   footer {  clear:both; background-color: red; border:5px solid black; text-align:center;  }       .b { border:5px solid black; text-align: center; background-color: red; }   .field { border:2px solid black; text-align: center; background-color: red; }    .navlink { border:1px solid #FFF; }     </style>     </head>    <body> <div id="content-wrapper"> <!-- Content Wrapper Start -->       <header class="b">       <h1>         Hello World!       </h1>       <h2>       Welcome to a magic world       </h2>     </header> <section id="main-content-area"> <!-- Section Main Content Area Start -->      <nav style="background-color: red; border: 2px solid black; margin: 10px; padding: 10px; float: left; ">           <fieldset class="field"><a href="BTSMain.html"><b>Home</b> </a></fieldset>      <fieldset class="field"><a href="BTSServices.html"><b>Services We Offer</b></a></fieldset>       <fieldset class="field"><a href="BTSAboutUs.html"><b>Request Service</b></a></fieldset>      <fieldset class="field"><a href="BTSTestPage.html"><b>Contact Us</b></a></fieldset>      <fieldset class="field"><a href="BTSTestPage2.html"><b>About BTS</b></a></fieldset>      </nav>        <article style="float: left">       My world is a strange place... it is populated by lemurs, lobsters, larvae, lampreys, and llamas. Lllaaaammmaaaaaaaaaassssssssssssssssssssssssss........... Lllaaaammmmmmmmaaaaaaassssssssssssssss       <h4> <b> Llamas...... </b> </h4>     </article>      </section><!-- # Section Main Content Area End -->     <footer>     <h1> <a href="BTSAboutUs.html"><b>About My World </b></h1>     </footer> </div><!-- # Content Wrapper End -->   </body>   </html>

    Thanks in advance :D

×
×
  • Create New...