CSS Help with Moving a Sidebar/Making it Horizontal?

Hi there,

I'm very new to this so please forgive my green-ness (I'm not a coder, just trying to get my website off the ground), but I wonder if anyone can help me with a layout dilemma. I have a membership site and am using a widget for the forum boards, but the sidebar on the page pushes the forum all the way right and makes it hard to maneuver and look incongruous with the page. I'd like to move the sidebar so it is horizontal above the forum boards. This way, I'm hoping to center the forum boards so it doesn't have to share space with the sidebar and has enough room to spread out as it were. See below for the current code. Can anyone help me? I've been searching online all day and nothing doing. I'd appreciate any help/feedback.

Thanks,
Stacey

/*
-----------------------------------------------
Layout 1001: Screen Styles
----------------------------------------------- */

body {
margin: 0;
padding: 0;
}

.altcolor {
background-color: #|:bg_color1|:;
}


/* Container */

div#container {
margin: 0 auto;
width: 940px;
background-image: url(1001-container_bg.gif);
background-repeat: repeat-y;
background-position: 239px 0;
}


/* Header */

div#header {
position: relative;
padding-bottom: 40px;
background: #fff;
zoom: 1;
}
div#header_wrapper {
padding-top: 20px;
}

div#emotion-header {
position: relative;
}
div#emotion-header strong#emotion-header-title {
position: absolute;
top: 0;
left: 0;
}


/* Content */

div#content {
width: 700px;
float: right;
background: #fff;
}
div#content div.gutter {
padding: 0 100px 60px 100px;
}


/* Sidebar */

div#sidebar {
width: 239px;
float: left;
padding: 0 0 40px 0;
}

div#jimdobox {
margin-bottom: 20px;
}


/* Navigation */

div#navigation {
margin: 0 0 20px;
padding: 0 0 30px;
background: url(1001-navigation_bg.gif) repeat-x 0 100%;
}

ul.mainNav1 {
margin: 0;
padding: 1px 0 0;
list-style: none;
background: url(1001-dots.gif) repeat-x;
}
ul.mainNav1 li {
width: 239px;
}
ul.mainNav1 li a {
font-weight: bold;
display: block;
width: 219px;
padding: 5px 10px;
background: url(1001-dots.gif) repeat-x 0 100%;
background-color: #fff !important;
text-align: right;
text-decoration: none;
}
ul.mainNav1 li a:hover, ul.mainNav1 li a.current {
background: transparent !important;
color: #fff;
}
ul.mainNav2 {
margin: 0;
padding: 0;
list-style: none;
}
ul.mainNav2 li a {
padding: 5px 30px 5px 10px;
width: 199px;
}
ul.mainNav3 {
margin: 0;
padding: 0;
list-style: none;
}
ul.mainNav3 li a {
padding: 5px 50px 5px 10px;
width: 179px;
}

div#sidebar_content {
margin: 0 0 20px;
padding: 0 20px;
}


/* Footer */

div#footer {
width: 700px;
margin-left: 240px;
}
div#footer div.gutter {
background: url(1001-dots.gif) repeat-x;
background-color: #fff;
float: left;
width: 660px;
padding: 10px 20px;
}

br.c {
display: block;
}

 

Thanks so much! Here's the HTML:

<div id="container" class="altcolor">
<div id="wrapper">
<div id="header">
<div id="header_wrapper" class="altcolor"><img src="1001-emotionheader.jpg" alt="" /></div>
</div>
<div class="c"></div>
<div id="content">
<div class="gutter"><var>content</var></div>
</div>
<div id="sidebar">
<div id="navigation"><var>navigation[1|2|3]</var></div>
<div id="sidebar_content"><var>sidebar</var></div>
</div>
</div>
<div class="c"></div>
<div id="footer">
<div class="gutter"><var>footer</var></div>
</div>
<div class="c"></div>
</div>

 

Thanks so much. Instead of fumbling my way through learning code in this way, I decided to use Wix templates which allow me a bit more flexibility and ease of use. But thank you so much for responding and being willing to help. I appreciate it.