<section> appears below <nav>?

JustRob · February 20, 2016

Hello,

For this website I have both a horizontal and a vertical navigation bar. The horizontal navigation bar is at the top of the website, under the header. Then the vertical navigation bar goes below that, to the left. Both are defined by <nav> elements.

So I want my content area below that horizontal navigation bar and to the right of the vertical one. I defined my content area with a <section> element. Problem is, it appears below the vertical menu, leaving just a gaping hope to the right. I don't know why it's doing that.

What I have so far:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link href="stylesheet/stylesheet.css" rel="stylesheet">
      
<title> Gaming World // Home </title>
</head>
<body>

<div id="container">
<header></header>

<nav id="topbar">
  <a href="http://gamingw.net/games/">Games</a>
  <a href="http://gamingw.net/mini/">Daily News</a>
  <a href="http://gamingw.net/dev/">Dev Logs</a>
  <a href="http://gamingw.net/mailbag/">Mailbag</a>
</nav>
    
<nav id="leftbar">
  <p>Gaming World</p>
    <a href="index.html">Home</a>
    <a href="http://gamingw.net/feedback/" target="_top">Feedback</a>
    <a href="http://www.gamingw.net/forums/">Forums</a>
    <a href="http://gamingw.net/search/">Search</a>
    <a href="http://www.whahay-irc.net/">IRC Chat</a>
  
  <p>Developers</p>
    <a href="http://gamingw.net/resource/">Resources</a>
    <a href="http://gamingw.net/tutorials/">Tutorials</a>
    <a href="articles/index.php">Articles</a>
    <a href="http://gamingw.net/music/">Music</a>
    <a href="http://gamingw.net/utilities/">Utilities</a>
    <a href="http://gamingw.net/developers/">Developer Directory</a>
  
  <p>Articles</p>
    <a href="http://gamingw.net/mini/">Daily News</a>
    <a href="http://gamingw.net/news/">News</a>				
    <a href="http://gamingw.net/features/">Features</a>
    <a href="http://gamingw.net/reviews/">Reviews</a>
    <a href="http://gamingw.net/previews/">Previews</a>
    <a href="http://gamingw.net/interviews/">Interviews</a>
    <a href="http://gamingw.net/mailbag/">Mail bag</a>
  
  <p>Games</p>
    <a href="http://gamingw.net/games/">Game Index</a>
    <a href="http://gamingw.net/games/action/">Action</a>
    <a href="http://gamingw.net/games/adventure/">Adventure</a>
    <a href="http://gamingw.net/games/arcade/">Arcade/Classic</a>
    <a href="http://gamingw.net/games/puzzle/">Puzzle</a>
    <a href="http://gamingw.net/games/platformer/">Platformer</a>
    <a href="http://gamingw.net/games/rpg/">RPG</a>
    <a href="http://gamingw.net/games/strategy/">Strategy</a>
    <a href="http://gamingw.net/games/all">All Games</a>
  
  <p>Makers</p>
    <a href="http://gamingw.net/makers/ags">Adventure Game</a>
    <a href="http://gamingw.net/makers/klik">Clickteam</a>
    <a href="http://gamingw.net/makers/gamemaker">Game Maker</a>
    <a href="http://gamingw.net/makers/ika">ika</a>
    <a href="http://gamingw.net/makers/sphere">Sphere</a>
    <a href="http://gamingw.net/makers/toolkit">RPG Toolkit</a>
    <a href="http://gamingw.net/makers/rm2k">RPGMaker 2000</a>
    <a href="http://gamingw.net/makers/rm2k3">RPGMaker 2003</a>
    <a href="http://gamingw.net/makers/verge">Verge</a>
  
  <p>Community</p>
    <a href="http://gamingw.net/staff/">Staff</a>
    <a href="http://gamingw.net/contact/">Contact</a>
    <a href="http://gamingw.net/register/">Register</a>
</nav>

<section id="content">
<h1 id="MasterHead">Today on Gaming World</h1>

Content goes here

</section>
</div>

	<footer>
	<a href="http://gamingw.net/register/">Join Gaming World</a>  
	<a href="http://gamingw.net/stats/">Website Statistics</a>  
	<a href="http://gamingw.net/about/">About Gaming World</a>  
	<a href="http://bart.gamingw.net/">Backend</a>  
	<a href="http://gamingw.net/contact/">Contact us</a> <br>

	Gaming World © 2004 - Coding and Design by <a href="http://bart.gamingw.net/">Bartek 
    Gniado</a> - Read our <a href="http://gamingw.net/privacy.htm">Privacy Statement</a> 
    and <a href="http://gamingw.net/terms.htm">Terms of Service</a>		
	</footer>

</body>
</html>

Relevant CSS

body {	
	background-color: #04599F;
	font-size: 10px;
	font-family: Verdana,Arial, Helvetica, Sans-serif;
	margin: 0px;
}

header {
	display: block;
	height: 95px;
	background: url(../images/gwlogo_spring.gif) no-repeat top left;
	background-color: #556B99;
}

nav#topbar { 
	height: 20px; 
	border-width: 1px medium; 
	border-style: solid none; 
	border-color: #404a68;
	text-align: left; 
}

nav#topbar a:link, nav#topbar a:visited, nav#topbar a:hover { 
	float: left; 
	padding-left: 17px; 
	margin: 0px; 
	background: none repeat scroll 0% 0% transparent; 
	font-weight: bold; 
	font-size: 10px; 
	line-height: 20px; 
	text-decoration: none; 
	white-space: nowrap; 
	z-index: 1000; 
	color: #FFF;
}

nav#leftbar {
	width: 130px;
}

nav#leftbar p {
	text-align:left;
	font-size:11px;
	font-weight:bold;
	color:#FFFFFF;
	padding:3px;
	background-color: #404A68;
}

nav#leftbar a {
	text-align: center;
	display: block;
	width: 124px;
	font-weight: normal;
	padding: 1px;
	border-left: 2px solid #404A68;
	border-right: 2px solid #404A68;
	border-bottom: 1px solid #404A68;
	background-color: #556B99;
	color: #cff;
	text-decoration: none;
}
	
nav#leftbar a:hover {
	font-weight: normal;
	border-left: 2px solid #404A68;
	border-right: 2px solid #404A68;
	background-color: #5F76A5;
	color: #fff;
	text-decoration: none;
}

#container {
	position: relative;
	margin: 0px;
	padding: 0px;
	max-width: 1024px;
	background-color: #556B99;
}

#content {
	min-width: 300px;
	padding: 5px;
	font-size: 100%;
	text-align: left;
	background-color: #eee;
	vertical-align: top;
}

#MasterHead {

	padding: 3px;
	font-weight: bold;
	border-width:1px;
	border-style:solid;
	border-color:#6272A0;
	background-color:#6272A0;
	font-size:13px;
	margin-bottom: 2px;
	color:#fff;
	margin: 0px;
}

footer {
		padding-top: 6px;
		padding-bottom: 10px;
		font-size: 10px;
		background-color: #404A68;
		text-align: center;
		color: #fff;
}

footer a:link, footer a:visited { color: #fff; }

The result:

Edited February 20, 2016 by JustRob

dsonesuk · February 20, 2016

Float left sidebar left, apply margin-left: the same width or greater than width of left sidebar to section OR give section overflow hidden;

Edited February 20, 2016 by dsonesuk

JustRob · February 20, 2016

Hello,

Thank you, that worked. However, now I have the same problem, but with a different element. I want to have sidebar to the right of my content area, with a login form and a basic news feed. Instead of appearing to the right, it once again appears below everything else. I tried floating it left and floating it right, but neither of them did what I want.

This is my HTML now:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link href="stylesheet/stylesheet.css" rel="stylesheet">
<link href="rightbar.css" rel="stylesheet">

<meta name="description" content="Graphical Resources, Articles, Tutorials, Sections dedicated to Game Makers - Learn how to create games!">
<meta name="keywords" content="Gaming, World, RPG, Maker, 2000, RM2K, RPGM2K,Character, Sets,Animations,Tile,Chipset,Battle,Background,Sprite,maps,Games,game,maker,resources,liverpg,live,rpg,panorama,parallex,review,previews,creation,article,links,art,music,klik,play,click,create,games,factory,multimedia,fusion,vitalize">
      
<title> Gaming World // Home </title>
</head>
<body>

<div id="container">
<header></header>

<nav id="topbar">
  <a href="http://gamingw.net/games/">Games</a>
  <a href="http://gamingw.net/mini/">Daily News</a>
  <a href="http://gamingw.net/dev/">Dev Logs</a>
  <a href="http://gamingw.net/mailbag/">Mailbag</a>
</nav>
    
<nav id="leftbar">
  <p>Gaming World</p>
    <a href="index.html">Home</a>
    <a href="http://gamingw.net/feedback/" target="_top">Feedback</a>
    <a href="http://www.gamingw.net/forums/">Forums</a>
    <a href="http://gamingw.net/search/">Search</a>
    <a href="http://www.whahay-irc.net/">IRC Chat</a>
  
  <p>Developers</p>
    <a href="http://gamingw.net/resource/">Resources</a>
    <a href="http://gamingw.net/tutorials/">Tutorials</a>
    <a href="articles/index.php">Articles</a>
    <a href="http://gamingw.net/music/">Music</a>
    <a href="http://gamingw.net/utilities/">Utilities</a>
    <a href="http://gamingw.net/developers/">Developer Directory</a>
  
  <p>Articles</p>
    <a href="http://gamingw.net/mini/">Daily News</a>
    <a href="http://gamingw.net/news/">News</a>				
    <a href="http://gamingw.net/features/">Features</a>
    <a href="http://gamingw.net/reviews/">Reviews</a>
    <a href="http://gamingw.net/previews/">Previews</a>
    <a href="http://gamingw.net/interviews/">Interviews</a>
    <a href="http://gamingw.net/mailbag/">Mail bag</a>
  
  <p>Games</p>
    <a href="http://gamingw.net/games/">Game Index</a>
    <a href="http://gamingw.net/games/action/">Action</a>
    <a href="http://gamingw.net/games/adventure/">Adventure</a>
    <a href="http://gamingw.net/games/arcade/">Arcade/Classic</a>
    <a href="http://gamingw.net/games/puzzle/">Puzzle</a>
    <a href="http://gamingw.net/games/platformer/">Platformer</a>
    <a href="http://gamingw.net/games/rpg/">RPG</a>
    <a href="http://gamingw.net/games/strategy/">Strategy</a>
    <a href="http://gamingw.net/games/all">All Games</a>
  
  <p>Makers</p>
    <a href="http://gamingw.net/makers/ags">Adventure Game</a>
    <a href="http://gamingw.net/makers/klik">Clickteam</a>
    <a href="http://gamingw.net/makers/gamemaker">Game Maker</a>
    <a href="http://gamingw.net/makers/ika">ika</a>
    <a href="http://gamingw.net/makers/sphere">Sphere</a>
    <a href="http://gamingw.net/makers/toolkit">RPG Toolkit</a>
    <a href="http://gamingw.net/makers/rm2k">RPGMaker 2000</a>
    <a href="http://gamingw.net/makers/rm2k3">RPGMaker 2003</a>
    <a href="http://gamingw.net/makers/verge">Verge</a>
  
  <p>Community</p>
    <a href="http://gamingw.net/staff/">Staff</a>
    <a href="http://gamingw.net/contact/">Contact</a>
    <a href="http://gamingw.net/register/">Register</a>
</nav>

<section id="content">
<h1 id="MasterHead">Today on Gaming World</h1>

Content goes here

</section>

<aside id="rightbar">

  <p id="rightbarhead">Login</p>
  <form action="http://gamingw.net/members/" method="post" name="LOGIN" 
  onsubmit="return ValidateForm()">
  <input name="act" value="Login" type="hidden">
  <p id="login">Username</p>
  <input value="" maxlength="64" name="username" type="text"><br>
  <p id="login">Password<p>
  <input name="password" type="password"><br>
  <input name="submit" value="Log in" type="submit">
  </form>

</aside>

	<footer>
	<a href="http://gamingw.net/register/">Join Gaming World</a>  
	<a href="http://gamingw.net/stats/">Website Statistics</a>  
	<a href="http://gamingw.net/about/">About Gaming World</a>  
	<a href="http://bart.gamingw.net/">Backend</a>  
	<a href="http://gamingw.net/contact/">Contact us</a> <br>

	Gaming World © 2004 - Coding and Design by <a href="http://bart.gamingw.net/">Bartek 
    Gniado</a> - Read our <a href="http://gamingw.net/privacy.htm">Privacy Statement</a> 
    and <a href="http://gamingw.net/terms.htm">Terms of Service</a>		
	</footer>
</div>
</body>
</html>

And the CSS:

nav#leftbar {
	float: left;
	width: 130px;
}

nav#leftbar p {
	text-align:left;
	font-size:11px;
	font-weight:bold;
	color:#FFFFFF;
	padding:3px;
	background-color: #404A68;
}

nav#leftbar a {
	text-align: center;
	display: block;
	width: 124px;
	font-weight: normal;
	padding: 1px;
	border-left: 2px solid #404A68;
	border-right: 2px solid #404A68;
	border-bottom: 1px solid #404A68;
	background-color: #556B99;
	color: #cff;
	text-decoration: none;
}
	
nav#leftbar a:hover {
	font-weight: normal;
	border-left: 2px solid #404A68;
	border-right: 2px solid #404A68;
	background-color: #5F76A5;
	color: #fff;
	text-decoration: none;
}

aside#rightbar {
	width: 180px;
}

#rightbarhead {
	text-align: left;
	font-size: 11px;
	font-weight :bold;
	color: #FFFFFF;
	padding: 3px;
	background-color: #404A68;
}

#login {
	text-align: center;
	font-size: 11px;
	font-weight: bold;
	color: #FFFFFF;
	padding: 3px;
}

#container {
	position: relative;
	margin: 0px;
	padding: 0px;
	max-width: 1024px;
	background-color: #556B99;
}

#content {
	margin-left: 130px;
	width: 716px;
	height: 700px;
	padding: 5px;
	font-size: 100%;
	text-align: left;
	background-color: #eee;
	vertical-align: top;
}

So this is what it looks like now:

And this is what I want it to look like (as far as the sidebar to the right is concerned):

Positioning stuff with CSS still really puzzles me. I can never seem to figure out how to get my elements where I want them.

Edited February 20, 2016 by JustRob

dsonesuk · February 20, 2016

Because content section is not floated and block element it will force any element following it to stack below it, but it will merge into same level side by side if both floated sidebars are placed ABOVE it.

JustRob · February 20, 2016

Alright, thanks for clearing that up. I think I have it working now, but if I resize my window, the sidebar on the right moves with the window. Is there any way to make it stay where it is? I tried position absolute, but then it jumps back to the left even though I have float: right.

JustRob · February 20, 2016

Nevermind, I finally figured it out. I set the container div which contains the left bar, content, and right bar to position: absolute. Now everything stays in place.

Thanks for all your help!

dsonesuk · February 20, 2016

IF you want it FIXED which seem very strange these days? when you usually have to allow for different device widths, use width instead of max-width.

JustRob · February 20, 2016

The max-width is only there because the content area is empty for now, so if I leave it out it will be a very narrow space. Once I've added all the stuff I want in there I can probably remove that.

dsonesuk · February 20, 2016

You have made a beginners mistake in using position absolute for layout, you never use this property for layout purposes only for overlapping, it will cause more problems rather than less.

JustRob · February 20, 2016

Oh, wait. I get what you mean. So I changed the max-width property of the container div to width, and I removed the position property altogether. Now it still works. But it looks like the same result to me. But if it's bad to use position: absolute, I'll go with this.

Edited February 20, 2016 by JustRob

Sign In

<section> appears below <nav>?

Recommended Posts

JustRob

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

JustRob

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

JustRob

Link to comment

Share on other sites

JustRob

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

JustRob

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

JustRob

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity