b2evolution question Options

[YaWeaveIzOnFiyah]

Right now I'm trying to customize my layout so there's a header on top and the blog and sidebar and all that below it.

I've tried to enter my header on the 'header' section of my CSS but it moves the navigation bar to the top of the page & the header to the bottom

Ex. HERE

<!-- begin code provided by createblog.com --><br />body {<br />  font-family: arial;<br />  font-size: 11px;<br />  color: #6e0e2e;<br />  background: url(http://www.urban-esque.com/b2/skins/uneven/images/LilKimPattern.jpg); <br />}<br /><br />acronym {<br />  cursor: help;<br />  border-bottom: 1px solid #006DA6;<br />}<br /><br />/* -- Layout classes -- */<br /><br />#mainContainer {<br />  width: 760px;<br />  margin-left: auto;<br />  margin-right: auto;<br />}<br /><br />/* -- Content container -- */<br /><br />#content {<br />  float: right;<br />  width: 550px;<br />  margin-right: 10px;<br />}<br />#content a {<br />  text-decoration: none;<br />  border-bottom: 1px solid #DEFF00;<br />  color: #FFFFFF;  <br />}<br /><br />#content a:hover {  <br />  border-bottom: 1px solid #DEFF00;<br />  color: #DEFF00;<br />}<br /><br />#content a img {<br />  border: 0px;<br />}<br /><br />#sideBar li {<br />list-style: none;<br />}<br /><br />#sideBar ul {<br />  margin:0;<br />  padding:0;<br />}<br /><br />#content h1 {<br />  clear: both;  <br />  font-size: 1.0em;<br />  letter-spacing: 1px;<br />  text-transform: uppercase;<br />  text-indent: 10px;<br />  margin: 0px;<br />  border-top: 10px solid #000000; <br />  color: #DEFF00;<br />  background-color: #006DA6;<br />}<br />#content .postBox img {<br />margin:5px;<br />}<br />/* -- Content header and footer -- */<br /><br />#header {<br />  display: table-cell;  <br />  height: 404px;<br />  width: 550px;<br />  text-align: right;<br />  vertical-align: bottom;<br />  margin-bottom: 0px;<br />  background: url(http://www.urban-esque.com/b2/skins/uneven/images/LighersUp.jpg) no-repeat top left;  <br />}<br /><br />#footer {<br />  float: left;<br />  height: 75px;<br />  width: 550px;  <br />  font-size: 0.8em;<br />  text-transform: uppercase;<br />  text-align: center;  <br />  margin-top: 10px;<br />  margin-bottom: 10px; <br />  background: #333333 url(images/round_corner.gif) no-repeat bottom right;  <br />}<br /><br />#footer a {<br />  border: 0px;<br />  color: #DEFF00;  <br />}<br /><br />#footer a:hover {<br />  border: 0px;<br />  color: #AAAAAA;  <br />}<br />/* -- Boxes and tops -- */<br />.boxTop {<br />  clear: both;  <br />  font-size: 1.0em;<br />  letter-spacing: 1px;<br />  font-weight: bold;<br />  text-transform: uppercase;<br />  padding-left: 10px;<br />  margin: 0px;<br />  border-top: 10px solid #000000;<br />  color: #FFFFFF;<br />  background-color: #ff216c;<br />}<br />.postBox {<br />  margin-top: 0px;<br />  margin-bottom: 0px;<br />  padding: 8px;<br />  background: url(http://www.urban-esque.com/b2/skins/uneven/images/Ivory.jpg);<br />  border-top: 10px solid #333333;<br />}<br />.menuBox {<br />  margin-top: 0px;<br />  margin-bottom: 0px;<br />  background: url(http://www.urban-esque.com/b2/skins/uneven/images/Ivory.jpg);<br />  font-size: 11px;<br />  font-face: arial;<br />  color: #6e0e2e;<br />  text-transform: none;<br />  border-top: 10px solid #333333;<br />}<br /><br />/* -- Menu & news container -- */<br /><br />#sideBar {<br />  float: right;  <br />  width: 200px;<br />  margin: 0px;<br />  padding: 0px;  <br />  background-color: #333333;<br />}<br /><br />#sideBar p {    <br />  margin: 0px;<br />  padding: 5px 5px 10px 5px;<br />  background-color: #555555;<br />}<br /><br />#sideBar .postBox a {  <br />  text-decoration: none;<br />  border-bottom: 1px solid #DEFF00;<br />  color: #FFFFFF;<br />}<br /><br />#sideBar .boxTop a {  <br />  text-decoration: none;<br />  color: #DEFF00;<br />}<br />#sideBar .boxTop a:hover {<br />  color: #FFFFFF;<br />}<br /><br />#sideBar a:hover {<br />  color: #DEFF00;<br />}<br /><br />#sideBar a img {  <br />  vertical-align:middle;<br />  padding: 0 5px 0 5px;<br />  border: 0px;<br />}<br />#sideBar .menuBox a {<br />  border: 0px;<br />}<br /> <br />#sideBar a.menuItem, li.menuItem {<br />  display: block;<br />  clear: both;<br />  font-size: 11px;<br />  text-transform: uppercase;<br />  text-decoration: none;<br />  margin-top: 1px;<br />  padding: 0 0 0 25px;<br />  border: 0px;<br />  color: #FFFFFF;<br />  background: #6e0e2e url(images/relaxed_icn_menu.gif) no-repeat center left;<br />}<br />#sidebar a.boxTop {<br /> border: 0px;<br />  display: block;<br />}<br />#sideBar a:hover.menuItem, li:hover.menuItem {<br />  color: #FFFFFF;<br />  background: #d81c51 url(images/relaxed_icn_menu_on.gif) no-repeat center left;<br />}<br /><br />#sideBarHeader {<br />  height: 100px;<br />  background: #333333 url(images/relaxed_hdr_bg.gif) repeat-x bottom right;;<br />}<br /><br />#sideBarFooter {  <br />  height: 70px;<br />  border-top: 10px solid #000000;<br />  background: #333333 url(images/round_corner.gif) no-repeat bottom right;<br />}<br /><br />/* -- Title and sub-headings -- */<br /><br />.highLight {<br />  color: #DEFF00;<br />}<br /><br />/* -- IE CSS2 selector hack.  This still validates, but IE ignores the class defined<br />      with the [id].  The result is you set the IE specific value in the first class<br />      definition, and the standard compliant browser value in the second class -- */<br /><br />#title {<br />  font-size: 36px;<br />  padding: 48px 4px 0px 0px;  <br />}<br /><br />#title a, a:hover {<br />  border:0px;<br />}<br />#title[id] {<br />  padding-top: 0px;<br />  padding-bottom: 3px;<br />}<br /><br />#subtitle{<br />  display: block;  <br />  font-size: 10px;<br />  text-transform: uppercase;<br />  margin-top: -4px;<br />  border: 0px;<br />  color: #DEFF00;  <br />}<br /><br /><br />strong, .subHeading {<br />  font-size: 0.8em;<br />  text-transform: uppercase;  <br />  color: #DEFF00;  <br />}<br /><br />.subHeading {<br />  display: block;<br />}<br /><br />/* -- Images styles -- */<br /><br />.imgRight, .imgLeft {<br />  border: 1px solid #888888;<br />}<br /><br />.imgRight {<br />  float: right;<br />  margin: 0 0 10px 10px;<br />  <br />}<br /><br />.imgLeft {<br />  float: left;<br />  margin: 0 10px 10px 0;  <br />}<br /><br />/* -- Takes care of the 'jump to top' arrow -- */<br /><br />.upArrow {<br />  clear: both;<br />  display: block;<br />  text-align: right;<br />}<br /><br />.upArrow a img {  <br />  margin-top: 10px;<br />  border-bottom: 0px;<br />  background-color: #DEFF00;<br />}<br /><br />.upArrow a:hover img {  <br />  border: 0px;<br />  background-color: #BBBBBB;<br />}<br /><br />/* -- Quote block styles -- */<br /><br />.quote, blockquote {<br />  display: block;<br />  margin: 10px 20px 10px 20px;<br />  padding: 4px;  <br />  border: 1px solid #888888;<br />  background-color: #666666;<br />}<br /><br />.author {<br />  display: block;<br />  font-size: 0.8em;<br />  text-transform: uppercase;<br />  color: #DEFF00;<br />}<br />.bSmallPrint {<br />  font-size: 0.8em;<br />}<br /><br />fieldset {<br />  border: 0px;<br />}<br />/* Calendar: */<br />caption.bCalendarCaption {<br /> border: 0px solid #ccc;<br /> background-color: #eee;<br /> border-bottom: 0;<br /> font-size: 105%;<br /> font-weight: bold;<br /> margin: auto;<br /> padding: .5ex 0;<br /> white-space: nowrap;<br />}<br />table.bCalendarTable {<br /> border: solid 0px #ccc;<br /> border-collapse: separate;<br /> margin: 0 auto 1em auto;<br /> font-size: 77%;<br /> border-spacing: 0px; <br />}<br />table.bCalendarTable tfoot td {<br /> border-top: 1px solid #ccc;<br />}<br />table.bCalendarTable tfoot a {<br /> text-decoration: none;<br />}<br />table.bCalendarTable tfoot a:hover {<br /> background-color: #78a;<br /> color: #fff;<br />}<br />th.bCalendarHeaderCell {<br /> color: #abc;<br />  font-size:0.7em;<br />}<br />#bCalendarToday {<br /> background: url(http://www.urban-esque.com/b2/skins/uneven/images/Ivory.jpg);<br />}<br />tr.bCalendarRow {<br /> text-align: center;<br />}<br />th.bCalendarHeaderCell {<br /> font-size: 84%;<br /> width: 4ex;<br />}<br />td.bCalendarCell {<br /> width: 4ex;<br /> height: 3.5ex;<br />}<br />.bCalendarLinkPost {<br /> font-weight: bold;<br />}<br />td#prev,<br />td#next {<br /> font-weight: bold;<br /> font-size: 105%;<br /> padding: .5ex;<br /> white-space: nowrap;<br />}<br />td#prev a,<br />td#next a {<br /> padding: 0 .5ex;<br />}<br />td#prev {<br /> text-align: left;<br />}<br />td#next {<br /> text-align: right;<br />}<br /><br /><br /><!-- end code provided by createblog.com -->

^^ Those are my codes, could anybody tell me what's wrong with it?