Menu
It's been two days since I started trying to make this work and I swear I can't see what I'm doing wrong. This is my HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Arvo">
<link rel="stylesheet" type="text/css" href="../css/main.css">
<meta charset="UTF-8">
<title>Home Page</title>
</head>
<body>
<div id="header">
Home
</div>
<div id="sidebar">
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</body>
And this is the CSS
* { margin:0; padding:0; }
div#header {
position:fixed;
outline: none;
text-align:center;
font-family:'Arvo', serif;
color:white;
font-size:48px;
height:5%;
width:100%;
background-color: rgba(0,79,113,1);
}
div#sidebar {
position:relative;
bottom
font-family:'Arvo', serif;
list-style-type: square;
list-style-position: inside;
color:white;
height:100%;
width:5%;
background-color: rgba(100,147,167,1);
}
li{
font-family:'Arvo', serif;
}
I'm a complete CSS noob(my code is probably horrible) and I would want the sidebar under the header bar, and the text in the middle of the sidebar aligned to the right. Can someone help?
jsfiddle: https://jsfiddle.net/k5ffLzoe/
952
asked Jun 02 '26 11:06
Try this: http://codepen.io/mattpark22/pen/xVxxWe
I've fixed a missing closing tag, and updated your CSS for you.
HTML:
* { margin:0; padding:0; }
div#header {
outline: none;
text-align:center;
font-family:'Arvo', serif;
color:white;
font-size:48px;
height:5%;
width:100%;
background-color: rgba(0,79,113,1);
}
div#sidebar {
float: right;
text-align: center;
font-family:'Arvo', serif;
list-style-type: square;
list-style-position: inside;
color:white;
height:100%;
width:5%;
background-color: rgba(100,147,167,1);
}
li{
font-family:'Arvo', serif;
}<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Arvo">
<link rel="stylesheet" type="text/css" href="../css/main.css">
<meta charset="UTF-8">
<title>Home Page</title>
</head>
<body>
<div id="header">
Home
</div>
<div id="sidebar">
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
