Jump to content
Sign in to follow this  
EchoedTruth

Fixing Section Layout (html5)

Recommended Posts

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

Edited by EchoedTruth

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

Hope this code useful to you. <fieldset class="field"><a href="BTSTestPage2.html"><b>Article & blogs</b></a></fieldset>

Share this post


Link to post
Share on other sites

I'm making changes to your code that should help fix the problem, along the way I'm also trying to teach you the right way to make websites to save memory, bandwidth and improve search engine reading. The isn't really the proper way to use a <fieldset> element, <fieldset> is for grouping form elements. You don't need the <b> element either, it's additional mark-up taking extra memory and bandwidth when CSS should do the formatting for you. You also shouldn't be using the style attribute, put everything into the stylesheet. HTML:

<nav id="main_nav">	<a href="BTSMain.html">Home</a>	<a href="BTSServices.html">Services We Offer</a>	<a href="BTSAboutUs.html">Request Service</a>	<a href="BTSTestPage.html">Contact Us</a>	<a href="BTSTestPage2.html">About BTS</a></nav><!-- Remove float from article because only the first element needs float --><article>	<h1>Headings</h1>	<p>The headings should start with H1 and continue down as you need, it is not a good idea to start with an H4 element because it confuses search engines. Remember that you can set the font size of the heading, so if H1 is too big just use CSS to change it rather than substitute it for the H4 element.</p>	<p>Removed the bold tag from the H4 element because H4 is bold by default.</p>	<h4>Heading</h4>	<p>The heading should be used as a title for the content in the paragraphs that follow it and not just because you want large text. Large text can be achieved with the font-size property in CSS.</p></article>

CSS:

#main_nav {	background-color: red;	border: 2px solid black;	margin: 10px;	padding: 10px;	float: left;	width: 180px; /* Giving width helps when floating elements */}#main_nav a {	/* Styling the links so that the <fieldset> and <b> tags aren't needed */	display: block;	border:2px solid black;	text-align: center;	background-color: red;	font-weight: bold;}

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×