My task involves using CSS to adjust the positions of various elements on a webpage. Currently, the right position navigation bar and the liquid layout are working fine, but the positioning of the "content" and "right navigation bar" is not correct. I aim to have the content centered, the left navigation on the left, and the right navigation on the right.
<title>CSS Liquid Layout</title>
<style type="text/css">
.due {
color: #ff0000;
font-weight: bold;
}
#leftnavigation{
position:absolute;
left:10px;
top:10px;
width:250px;
}
#rightnavigation {
float:right;
width:250px;
height:800px;
}
#content {
float:center;
}
</style>
</head>
<body leftmargin="0" topmargin="0" bgcolor="#ccff99">
<div id="app">
<div id="rightnavigation">
<h1>Right Navigation</h1>
<a href="http://www,google.com">link</a> <a href="http://www,google.com">Instructor</a>
<a href="http://www,google.com">Course</a> <a href="http://www,google.com">
Resume
project
</a>
</div>
<div id="content">
<h1>Sample Content</h1>
<p>
This is the content section of the page. Use structural markup
like <p></p>
to keep the page valid in XHTML.
</p>
<h2>Lorem Ipsum</h2>
</div>
<div id="leftnavigation">
<h1>Left Navigation</h1>
<p>
<a href="http://www,google.com">Page 1</a> <a href="http://www,google.com">Page 2</a> <a href="http://www,google.com">
Page
3
</a> <a href="http://www,google.com">Page 4</a> <a href="http://www,google.com">Page 5</a> <br />
Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor
amum.
</p>
<h2>Lorem Ipsum</h2>
</div>
</div>