I'm pretty stuck right now, I'm working on a site and I have the height of the list on my navigation bar sorted but now I want to make the width bigger so when I hover on it the background colour covers a slightly bigger area instead of brushing up against the end of the text.
I've tried padding it but all that seems to do is move the text over slightly and then center the text within that area.
Image (Don't have enough reputation to embed): http://i.imgur.com/pAxT3gb.png
This is the CSS I currently have for it. I would appreciate any help with this!
html {
margin: 0;
}
body {
padding: 0;
margin: 0;
border: 0;
}
.navigation {
font-family: Arial;
font-size: 16px;
font-weight: lighter;
background-color: #555;
color: white;
width: 100%;
height: 72px;
background-image: url("images/download.png");
}
.navigation ul {
list-style-type: none;
text-decoration: none;
}
.navigation li {
height: 100%;
width: 80px;
display: inline-block;
padding-top: 25px;
float: right;
margin-right: 120px;
}
.navigation li a {
text-decoration: none;
color: white;
}
.navigation li a:hover {
height: 100%;
padding-top: 25px;
padding-bottom: 30px;
width: 80px;
background-color: #556;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<div class="navigation">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
</body>
</html>
Is this what you are looking for.
Solution
We remove the width from the parent and make the links block elements with padding
.navigation li {
display: inline-block;
float: right;
margin-right: 120px;
}
.navigation li a {
text-decoration: none;
color: white;
display: block;
padding: 26px 30px;
}
.navigation li a:hover {
background-color: #556;
}
And making the li float right will mess up the order of your links consider floating the parent ul insted.
You'll need to apply the hover state to the li instead of the a, here's my suggestion:
html {
margin: 0;
}
body {
padding: 0;
margin: 0;
border: 0;
}
.navigation {
font-family: Arial;
font-size: 16px;
font-weight: lighter;
background-color: #555;
color: white;
width: 100%;
height: 72px;
background-image: url("images/download.png");
}
.navigation ul {
list-style-type: none;
text-decoration: none;
}
.navigation li {
height: 100%;
width: 80px;
display: inline-block;
padding-top: 25px;
float: right;
padding-left: 25px;
margin-right: 95px;
}
.navigation li a {
text-decoration: none;
color: white;
}
.navigation li:hover {
height: 100%;
padding-top: 25px;
padding-bottom: 30px;
width: 80px;
background-color: #556;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<div class="navigation">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
</body>
</html>
http://jsfiddle.net/mj8Lh31x/
html {
margin: 0;
}
body {
padding: 0;
margin: 0;
border: 0;
}
.clearfix {
clear: both;
}
.navigation {
font-family: Arial;
font-size: 16px;
font-weight: lighter;
background-color: #555;
color: white;
background-image: url("images/download.png");
}
.navigation ul {
float: right;
margin: 0px;
list-style-type: none;
text-decoration: none;
}
.navigation li {
padding: 30px 0px;
display: inline-block;
}
.navigation li a {
padding: 30px 25px;
text-decoration: none;
color: white;
}
.navigation li a:hover {
background-color: #556;
}
<div class="navigation">
<ul>
<li>Link 1
</li>
<li>Link 2
</li>
<li>Link 3
</li>
<li>Link 4
</li>
</ul>
<div class="clearfix"></div>
</div>
Related
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>My portfolio</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background-color: #fff;
margin-bottom: 20000px;
}
h1 {
}
#headname {
font-size: 30px;
font-family: sans-serif;
padding-left: 20px;
padding-right: 50px;
color: #356684;
}
#calculator {
text-decoration: none;
padding-right: 500px;
font-family:arial;
}
**#navigation {
position: fixed;
width: 100%;
height: 60px;
background-color: #eee;
}**
ul {
}
ul li {
list-style: none;
display: inline-block;
float: left;
line-height: 60px;
}
ul li a {
display: block;
text-decoration: none;
font-size: 14px;
font-family: arial;
color: #1e1e1e;
padding: 0 20px;
}
ul li a:hover {
color: #627f91;
}
**#bodie {
margin-top:80px;
}**</style>
</head>
<body>
<nav id="navigation">
<ul>
<li id="headname">My portfolio</li>
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav id="navigation">
<div id="bodie">
<h1>Welcome to my portfolio</h1>
</div id="bodie">
</body>
</html>
I have a navigation bar position:fixed; at the top of my page, in a nav container with the id "navigation".
I have a little piece of text under there, in a seperate div, id'd "bodie", that I have given the attribute: margin-top:80px;. So it would be displayed under the navigation bar.
For some reason, the navigation bar gets this attribute as well. I don't get why. Could someone explain this to me?
You just need to add top: 0; to the navigation with the fixed positioning.
Also, you don't include the id on the closing tag, so </nav id="navigation"> should just be </nav>. This applies to the div tag too.
* {
margin: 0;
padding: 0;
}
body {
background-color: #fff;
margin-bottom: 20000px;
}
h1 {
}
#headname {
font-size: 30px;
font-family: sans-serif;
padding-left: 20px;
padding-right: 50px;
color: #356684;
}
#calculator {
text-decoration: none;
padding-right: 500px;
font-family:arial;
}
#navigation {
position: fixed;
width: 100%;
height: 60px;
background-color: #eee;
top: 0;
}
ul {
}
ul li {
list-style: none;
display: inline-block;
float: left;
line-height: 60px;
}
ul li a {
display: block;
text-decoration: none;
font-size: 14px;
font-family: arial;
color: #1e1e1e;
padding: 0 20px;
}
ul li a:hover {
color: #627f91;
}
#bodie {
margin-top:80px;
}
<nav id="navigation">
<ul>
<li id="headname">My portfolio</li>
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
<div id="bodie">
<h1>Welcome to my portfolio</h1>
</div>
I am struggling with trying to recreate this submenu in html/css. The submenu is bigger wider than the parent <li> which seems to be the main issue. I need the submenu to be larger than the parent <li> and centered on it. This is what I am trying to recreate:
Screenshot of current progress:
So you can see in my version, the width of the submenu <ul> is only as big as the parent <li>. I need the submenu to be larger than the parent <li> and centered on it.
.navbar {
width: 100%;
height:80px;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
color: #111111;
background-color: #F9F9F9;
margin: 0;
padding: 0;
position: relative;
}
.logo {
font-size: 1.8em;
float: left;
line-height:80px;
width: 35%;
margin: 0;
padding: 0;
}
.nav {
float: right;
line-height:80px;
width: 65%;
margin: 0;
padding: 0;
font-size:0.8em;
text-align: right;
position: relative;
}
.nav li {
display: inline-block;
width: 75px;
text-align: center;
}
.nav li a {
position: relative;
}
.nav li ul {
position: absolute;
width: inherit;
text-align: center;
margin: -20px auto 0;
}
.nav > li > ul {
display: block;
border: 1px solid #111111;
padding: 0;
text-align: center;
}
.nav li ul li {
display: block;
margin: 0;
padding: 0;
line-height: 1;
}
.flLeft {
float: left;
}
.flRight {
float: right;
}
.white {
color: #ffffff;
}
.darkOrange {
color: #BF3600;
}
.black {
color: #111111;
}
.orange {
color: #FF6200;
}
a:link, a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.nav li a:link, .nav li a:visited {
color: #111111;
}
.nav li a:hover {
text-decoration: none;
border-bottom: 4px solid #FF6200;
font-weight: bold;
}
<div class="navbar">
<div class="container">
<div class="logo">
<span class="black">YOUR</span><span class="orange">LOGO</span>
</div>
<ul class="nav">
<li>
TITLE 1
</li>
<li>
TITLE 2
<ul>
<li>SUBMENU 1</li>
<li>SUBMENU 2</li>
<li>SUBMENU 3</li>
</ul>
</li>
<li>
TITLE 3
</li>
<li>
TITLE 4
</li>
<li>
TITLE 5
</li>
<li>
TITLE 6
</li>
<li>
TITLE 7
</li>
</div>
</div>
And I've created a fiddle: https://jsfiddle.net/gsmzhptu/embedded/result/
Updated fiddle with wide submenu, but not centered below main li menu item: https://jsfiddle.net/gsmzhptu/1/embedded/result/
I increased the line height. Do you want something like this?
.nav li ul li {
line-height: 2;
}
Check this JSFiddle: https://jsfiddle.net/gsmzhptu/11/
Positioning Solution
margin: -20px; and padding: adjustable 20px;
margin-left right and padding- left right should be exact and opposite to each other.
.nav > li > ul{
margin:-20px;
padding: 20px;
}
.nav li ul li {
{
margin:10px 0;
}
.navbar {
width: 100%;
height: 80px;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
color: #111111;
background-color: #F9F9F9;
margin: 0;
padding: 0;
position: relative;
}
.logo {
font-size: 1.8em;
float: left;
line-height: 80px;
width: 35%;
margin: 0;
padding: 0;
}
.nav {
float: right;
line-height: 80px;
width: 65%;
margin: 0;
padding: 0;
font-size: 0.8em;
text-align: right;
position: relative;
}
.nav li {
display: inline-block;
width: 75px;
text-align: center;
}
.nav li a {
position: relative;
}
.nav li ul {
position: absolute;
width: inherit;
text-align: center;
}
.nav>li>ul {
display: block;
border: 1px solid #111111;
padding: 0;
text-align: center;
margin: -20px;
padding: 20px;
}
.nav li ul li {
display: block;
margin: 0;
padding: 0;
line-height: 1;
margin: 10px 0px;
}
.flLeft {
float: left;
}
.flRight {
float: right;
}
.white {
color: #ffffff;
}
.darkOrange {
color: #BF3600;
}
.black {
color: #111111;
}
.orange {
color: #FF6200;
}
a:link,
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.nav li a:link,
.nav li a:visited {
color: #111111;
}
.nav li a:hover {
text-decoration: none;
border-bottom: 4px solid #FF6200;
font-weight: bold;
<div class="navbar">
<div class="container">
<div class="logo">
<span class="black">YOUR</span><span class="orange">LOGO</span>
</div>
<ul class="nav">
<li>
TITLE 1
</li>
<li>
TITLE 2
<ul>
<li>SUBMENU 1</li>
<li>SUBMENU 2</li>
<li>SUBMENU 3</li>
</ul>
</li>
<li>
TITLE 3
</li>
<li>
TITLE 4
</li>
<li>
TITLE 5
</li>
<li>
TITLE 6
</li>
<li>
TITLE 7
</li>
</div>
</div>
In this jsfiddle I do have a menu which displays dropdown menus for some items. The main menu and the submenu items do have an increased height. I am using the line-height property for this purpose.
/* body ---------------------------------------------------------- */
body {
font-family: Calibri, sans-serif;
min-height: 100vh;
display: flex;
flex-direction: column;
margin: 0;
}
/* header ---------------------------------------------------------- */
header {
width: 100%;
}
.header-div {
width: 920px;
margin-left: auto;
margin-right: auto;
}
/* main-menu ---------------------------------------------------------- */
div.float-left-menu {
float: left;
clear: both;
}
ul#main-menu {
display: inline;
padding: 0;
position: relative;
font-size: 1.1em;
text-align: center;
}
ul#main-menu li {
display: inline-block;
line-height: 200%;
list-style: none;
vertical-align: middle;
width: 120px;
}
ul#main-menu li:hover {
background-color: #4f569d;
}
ul#main-menu li a {
background: none;
color: #4f569d;
text-decoration: none;
text-transform: uppercase;
}
ul#main-menu li span {
background: none;
color: #4f569d;
text-transform: uppercase;
}
ul#main-menu li:hover>a {
color: #fff;
text-decoration: none;
}
ul#main-menu li:hover>span {
color: #fff;
}
ul#main-menu li:hover>ul {
display: block;
position: absolute;
/*top: 138%; hack for FF, otherwise there is a gap between the main menu and the dropdown menu*/
}
/* header-submenu ---------------------------------------------------------- */
ul#header-submenu {
display: none;
padding: 0;
text-align: left;
z-index: 1;
}
ul#header-submenu li {
display: block;
line-height: 200%;
padding-left: 5%;
background-color: #bbb;
list-style: none;
vertical-align: middle;
width: 240px;
}
ul#header-submenu li:hover {
background-color: #4f569d;
}
ul #header-submenu li a {
background: none;
color: #4f569d;
text-decoration: none;
}
ul#header-submenu li:hover>a {
color: #fff;
text-decoration: none;
}
<header>
<div class="header-div">
<div class="float-left-menu">
<nav>
<ul id="main-menu">
<li>Item 1</li>
<li>
<span>Sub 1</span>
<ul id="header-submenu">
<li>SItem 1</li>
<li>SItem 2</li>
</ul>
</li>
<li>
<span>Sub 2</span>
<ul id="header-submenu">
<li>SItem 1</li>
<li>SItem 2</li>
</ul>
</li>
<li>Item 2</li>
</ul>
</nav>
</div>
</div>
</header>
While the dropdown menu is displayed seemlessly below its parent item in Chrome, IE and Edge, Firefox displays a gap, which not only looks unfavourable but also makes the dropdown go away when the mouse cursor is moved there for selection. The problem does not appear with 'normal' height.
For line-height: 200%; I was able to fix the problem by adding top: 138%; to the ul of the dropdown, but frankly this approach is too much try-and-error.
Is there a cleaner solution for Firefox?
Use position to get the same
Update css part
ul#main-menu li {
display: inline-block;
line-height: 200%;
list-style: none;
vertical-align: middle;
width: 120px;
position:relative; /*add this*/
}
ul#header-submenu {
display: none;
padding: 0;
text-align: left;
z-index: 1;
position:absolute; /*add this*/
top:auto; /*add this you can change as your need */
left:0px; /*add this you can change as your need */
}
/* body ---------------------------------------------------------- */
body {
font-family: Calibri, sans-serif;
min-height: 100vh;
display: flex;
flex-direction: column;
margin: 0;
/* put the top margin into the header, otherwise there will always be a vertical scrollbar */
}
/* header ---------------------------------------------------------- */
header {
width: 100%;
}
.header-div {
width: 920px;
margin-left: auto;
margin-right: auto;
}
/* main-menu ---------------------------------------------------------- */
div.float-left-menu {
float: left;
clear: both;
}
ul#main-menu {
display: inline;
padding: 0;
position: relative;
font-size: 1.1em;
text-align: center;
}
ul#main-menu li {
display: inline-block;
line-height: 200%;
list-style: none;
vertical-align: middle;
width: 120px;
position: relative;
}
ul#main-menu li:hover {
background-color: #4f569d;
}
ul#main-menu li a {
background: none;
color: #4f569d;
text-decoration: none;
text-transform: uppercase;
}
ul#main-menu li span {
background: none;
color: #4f569d;
text-transform: uppercase;
}
ul#main-menu li:hover>a {
color: #fff;
text-decoration: none;
}
ul#main-menu li:hover>span {
color: #fff;
}
ul#main-menu li:hover>ul {
display: block;
position: absolute;
/*top: 138%; hack for FF, otherwise there is a gap between the main menu and the dropdown menu*/
}
/* header-submenu ---------------------------------------------------------- */
ul#header-submenu {
display: none;
padding: 0;
text-align: left;
z-index: 1;
position: absolute;
top: auto;
left: 0px;
}
ul#header-submenu li {
display: block;
line-height: 200%;
padding-left: 5%;
background-color: #eee;
list-style: none;
vertical-align: middle;
width: 240px;
}
ul#header-submenu li:hover {
background-color: #4f569d;
}
ul #header-submenu li a {
background: none;
color: #4f569d;
text-decoration: none;
}
ul#header-submenu li:hover>a {
color: #fff;
text-decoration: none;
}
<!DOCTYPE html>
<body>
<header>
<div class="header-div">
<div class="float-left-menu">
<nav>
<ul id="main-menu">
<li>Item 1</li>
<li>
<span>Sub 1</span>
<ul id="header-submenu">
<li>SItem 1</li>
<li>SItem 2</li>
</ul>
</li>
<li>
<span>Sub 2</span>
<ul id="header-submenu">
<li>SItem 1</li>
<li>SItem 2</li>
</ul>
</li>
<li>Item 2</li>
</ul>
</nav>
</div>
</div>
</header>
</body>
</html>
Working fiddle also included
fiddle link
How can I make it so that I can have both a horizontal and vertical navigation bar? I'm a big beginner baby at design and I'm trying to figure out what I'm doing wrong but I'm not sure how to have CSS on multiple links.
<body>
<div class="horizontallinks">
<ul>
<li> link1 </li>
<li>link 2</li>
<li>link 3</li>
<li>
<link 4</div>
<div class="verticallinks">
<ui>
<li>link a </li>
<li> link b</li>
<li> link c </li>
</div>
</ul>
</body>
css:
.horizontallinks {
position: fixed;
list-style-type: none;
margin-top: 70px;
margin-left: 300px;
padding: 0;
font-size: 18px;
overflow: hidden;
background-color: white;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.verticallinks {
position: fixed;
list-style-type: none;
padding: 0;
font-size: 18px;
margin-left: 45px;
margin-top: 165px;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li {
float: left;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.horizontallinks {
position: fixed;
list-style-type: none;
margin-top: 70px;
margin-left: 300px;
padding: 0;
font-size: 18px;
overflow: hidden;
background-color: white;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.verticallinks {
position: fixed;
list-style-type: none;
padding: 0;
font-size: 18px;
margin-left: 45px;
margin-top: 165px;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li {
float: left;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
<body>
<div class="horizontallinks">
<ul>
<li>link1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
</ul>
<div class="verticallinks">
<ul>
<li>link a</li>
<li>link b</li>
<li>link c</li>
</ul>
</div>
</div>
</body>
Try this
<body>
<h2 class="horizontallinks">
<ui class="make-inline">
<li>link1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
</ul>
</h2>
<div class="body-wrapper">
<div class="side-bar">
<ui>
<li>link a</li>
<li>link b</li>
<li>link c</li>
</ul>
</div>
<div class="body-style">
<!-- Body content -->
</div>
</div>
</body>
Would it not be better to create a horizontal menu for devices with large display and a vertical menu for devices with a smaller display?
css media classes (mdn link) can be used for this.
var close = document.getElementsByClassName("close");
var menu = document.getElementById("menu");
for (var i = 0; i < close.length; i++) {
close[i].addEventListener("click", function() {
menu.style.left = "-250px";
});
}
body {
margin: 0;
}
#menu {
display: block;
border-radius: 5px;
background-color: #496D89;
height: 50px;
}
#menu ul {
font-size: 0em;
display: block;
height: 100%;
font-size: 2rem;
margin: 0 auto;
padding: 0;
list-style: none;
}
#menu ul li {
line-height: 1.5em;
display: inline-block;
padding: 0 0.2em;
height: 100%;
}
#menu ul li:hover {
background-color: #294F6D;
border-radius: 5px;
}
#menu ul li a {
color: white;
}
#menu ul li a:visited {
color: #F9CEE7;
}
#menu .close {
display: none;
}
#media (max-width: 600px) {
#menu {
position: absolute;
display: inline-block;
width: 300px;
height: auto;
transition: left 1s;
}
#menu ul {
width: auto;
}
#menu ul li {
display: block;
}
#menu .close {
display: initial;
position: absolute;
right: 0;
top: 0;
width: 50px;
height: 50px;
font-size: 2rem;
border-radius: 5px;
border: none;
background-color: #123652;
color: white;
cursor: pointer;
text-shadow: 2px 2px black;
}
.close:active {
background-color: #042037;
text-shadow: none;
}
}
<nav id="menu" style="left:0px;">
<ul>
<li>Home
</li>
<li>Link1
</li>
<li>Link2
</li>
<li>Link3
</li>
<li>Link4
</li>
<li>Link5
</li>
</ul>
<button class="close">X</button>
</nav>
I'm very confused. #top div has a weird extra space in the bottom of it, setting height of course works, but the problem is that I want to add back compatibility, so if a custom font doesn't load, it uses Verdana, which is wider, so it takes more place, and if the navbar gets bigger, it won't properly fit in the #top
The code is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sidebar test</title>
</head>
<style>
div {
border: 1px solid #999;
}
body { font-family: Verdana, sans-serif; font-size: 17px; }
#navbar {
border-radius: 6px;
overflow: hidden;
display: inline-block;
margin: 0;
padding: 0;
}
#navbar ul {
list-style-type: none;
padding: 0;
margin: 0;
float: left;
}
#navbar ul li {
display: inline;
color: black;
text-decoration: none;
}
#navbar ul a {
float: left;
padding: 10px 18px;
text-decoration: none;
color: black;
background-color: #f1f1f1;
-webkit-transition: background-color 0.02s;
transition: background-color 0.02s;
}
#navbar ul a:hover {
background-color: #e6e6e6;
}
#navbar ul a:selected {
background-color: #c7c7c7;
}
#content {
padding: 35px 50px 60px 50px;
}
#container {
width: 900px;
margin: 20px auto;
border-radius: 5px;
box-shadow: 0px 2px 2px 1px #d5d5d5;
}
</style>
<body>
<div id="container">
<div id="top">
<img alt="logo" height="27px" src="http://static.tumblr.com/zicio7x/Tphntwm0j/yvemiro.svg">
<div id="navbar">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
</div>
<div id="content">
Content
</div>
</div>
</body>
</html>
By default, inline elements are vertically aligned to the baseline. Now the navbar contains an image and the menu bar next to each other, so it has to shift these up and down a bit in order to align them.
Solution: give these things vertical-align:middle (or any other value that doesn't require shifting the blocks out of center).
div {
border: 1px solid #999;
}
body {
font-family: Verdana, sans-serif;
font-size: 17px;
}
#top > a > img { /* this was added */
vertical-align: middle;
}
#navbar {
border-radius: 6px;
overflow: hidden;
display: inline-block;
margin: 0;
padding: 0;
vertical-align: middle; /* and this */
}
#navbar ul {
list-style-type: none;
padding: 0;
margin: 0;
float: left;
}
#navbar ul li {
display: inline;
color: black;
text-decoration: none;
}
#navbar ul a {
float: left;
padding: 10px 18px;
text-decoration: none;
color: black;
background-color: #f1f1f1;
-webkit-transition: background-color 0.02s;
transition: background-color 0.02s;
}
#navbar ul a:hover {
background-color: #e6e6e6;
}
#navbar ul a:selected {
background-color: #c7c7c7;
}
#content {
padding: 35px 50px 60px 50px;
}
#container {
width: 900px;
margin: 20px auto;
border-radius: 5px;
box-shadow: 0px 2px 2px 1px #d5d5d5;
}
<div id="container">
<div id="top">
<a href="#">
<img alt="logo" height="27" src="http://static.tumblr.com/zicio7x/Tphntwm0j/yvemiro.svg">
</a>
<div id="navbar">
<ul>
<li>Link 1
</li>
<li>Link 2
</li>
<li>Link 3
</li>
<li>Link 4
</li>
</ul>
</div>
</div>
<div id="content">
Content
</div>
</div>