S
Sems
Hi
I am playing with some simple HTMl and CSS (see below) and have a problem with it.
If you open the below HTML in Firefox above the nav bar there is a row or purple. I can't seem to lift the nav and the columns to cover this. Can anyone help me please? I'm sure its a simple tweak of the HTML or CSS but can't figure it out. Thank you!
<html>
<head>
<style>
body,
html {
margin:0;
padding:0;
color:#000;
background:#a7a09a;
}
#wrap {
width:500px;
margin:0 auto;
background:#99c;
}
#header {
background:#ddd;
}
#nav {
background:#c99;
}
#nav ul {
margin:0;
padding:0;
list-style:none;
}
#nav li {
display:inline;
margin:0;
padding:0;
}
#main {
float:left;
width:200px;
background:#9c9;
}
#sidebar {
float:right;
width:100px;
background:#99c;
}
#footer {
clear:both;
background:#cc9;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header"><h1>Heading</h1></div>
<div id="nav">
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
</ul>
</div>
<div id="main">
<h2>Col 1</h2>
<p>Lorem ipsum dolor sit amet, con adipiselit...</p>
</div>
<div id="sidebar">
<h2>Col 2</h2>
<p>Lorem ipsum dolor sit amet, con adipis elit...</p>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>
I am playing with some simple HTMl and CSS (see below) and have a problem with it.
If you open the below HTML in Firefox above the nav bar there is a row or purple. I can't seem to lift the nav and the columns to cover this. Can anyone help me please? I'm sure its a simple tweak of the HTML or CSS but can't figure it out. Thank you!
<html>
<head>
<style>
body,
html {
margin:0;
padding:0;
color:#000;
background:#a7a09a;
}
#wrap {
width:500px;
margin:0 auto;
background:#99c;
}
#header {
background:#ddd;
}
#nav {
background:#c99;
}
#nav ul {
margin:0;
padding:0;
list-style:none;
}
#nav li {
display:inline;
margin:0;
padding:0;
}
#main {
float:left;
width:200px;
background:#9c9;
}
#sidebar {
float:right;
width:100px;
background:#99c;
}
#footer {
clear:both;
background:#cc9;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header"><h1>Heading</h1></div>
<div id="nav">
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
</ul>
</div>
<div id="main">
<h2>Col 1</h2>
<p>Lorem ipsum dolor sit amet, con adipiselit...</p>
</div>
<div id="sidebar">
<h2>Col 2</h2>
<p>Lorem ipsum dolor sit amet, con adipis elit...</p>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>