Css layout overlapping - html

Question

Hello i am trying to get my columns in css to go down the page. Im new to css but know some css for messing around with things.
My columns are sat next to each other like so
collum1 collum2
I am trying to make them go down the page like so
collum1
collum2
But seems not wanting to move...
Here is my page source for the left side bar.
<div class="col1">
<div class="box" id="news">
<h1 id="news_handle">Home</h1>
<ul>
<li>Login</li>
<li>Register</li>
</ul>
<div class="bar">
<span>
<span></span></span></div>
</div>
<div class="box" id="events"></div>
</div>
<div class="co22">
<div class="box" id="news">
<h1 id="news_handle">22</h1>
<ul>
<li>1212</li>
<li>1212</li>
</ul>
<div class="bar">
<span>
<span></span></span></div>
</div>
<div class="box" id="events"></div>
</div>
Then here is my css style / file
body
{
background: #122530 url('./images/background.jpg') repeat-y;
text-align: center;
font: 12px Tahoma, Arial, Hevetica, Sans-serif;
}
a,a:visited
{
color: #1e3f51;
}
a:hover
{
text-decoration: none;
}
a img,a:visited img
{
border: 0;
}
/**
* General Structure
*/
div#container
{
width: 873px;
margin: 0 auto 0 auto;
text-align: left;
}
/**
* Banner/Nav
*/
div#banner
{
height: 255px;
background: url('./images/banner.jpg') no-repeat;
margin: 0 0 10px 0;
clear: both;
}
div#nav
{
background: url('./images/nav_bg.jpg') no-repeat;
height: 35px;
margin: 1px 0px 0px 2px;
width: 100%;
overflow: hidden;
float: left;
}
div#nav a
{
color: #ffffff;
font: bold 10px Tahoma, Arial, Hevetica, Sans-serif;
text-decoration: none;
height: 12px;
display: block;
float: left;
padding: 11px 7px 11px 7px;
text-transform: uppercase;
margin: 1px 0 0 0;
}
div#nav a:hover
{
background: url('./images/nav_hover.jpg') repeat-x;
}
/**
* Columns
*/
div.col1,div.col2
{
float: left;
}
div.col1
{
width: 190px;
}
div.col2
{
width: 479px;
margin: 0 7px 0 7px;
}
/**
* Columns
*/
div.co22
{
float: left;
}
div.co22
{
width: 190px;
}
div.co22
{
width: 479px;
margin:25px 50px 75px;
}
/**
* Box Elements
*/
div.box
{
margin: 0 0 10px 0;
}
div.box h1
{
height: 29px;
color: #ffffff;
font: 15px 'Trebuchet MS', Tahoma, Arial, Helvetica, Sans-serif;
padding: 6px 0 0 10px;
margin: 0;
border-bottom: 1px solid #112735;
cursor: move;
}
div.col2 div.box h1
{
cursor: auto;
}
div.col1 div.box h1
{
background: url('./images/col1_head.jpg') no-repeat;
}
div.col2 div.box h1
{
background: url('./images/col2_head.jpg') no-repeat;
}
div.box div.bar
{
height: 23px;
clear: both;
background: url('./images/box_foot.jpg') repeat-x;
color: #d1e3ee;
font: 11px Tahoma;
}
div.box div.bar span
{
height: 23px;
display: block;
background: url('./images/box_foot_left.jpg') no-repeat;
float: left;
padding: 4px;
}
div.box div.bar span span
{
height: 23px;
width: 2px;
background: url('./images/box_foot_right.jpg') top right no-repeat;
float: right;
display: block;
margin: -4px;
}
div.box div.bar a
{
display: block;
color: #d1e3ee;
text-decoration: none;
}
div.box div.bar a.right
{
text-align: right;
}
div.content
{
margin: 0 2px 0 2px;
background: #c1dae8 url('./images/body_bg.jpg') repeat-x;
border: 1px solid #ffffff;
padding: 10px 0 10px 0;
}
div.content p
{
margin: 0;
padding: 5px;
}
/**
* Lists
*/
ul
{
margin: 0;
padding: 0;
list-style: none;
}
ul li
{
background: url('./images/list_item.jpg') repeat-x;
border: 1px solid #112735;
border-top: 0px;
height: 14px;
padding: 4px;
}
ul li a
{
display: block;
text-decoration: none;
height: 14px;
}
ul.sponsors li
{
background: url('./images/list_sponsor.jpg') repeat-x;
height: 48px;
padding: 0;
}
ul.sponsors li a
{
height: 48px;
}
/**
* Footer
*/
div#footer
{
background: url('./images/footer.jpg') no-repeat;
height: 36px;
clear: both;
}
div#footer a
{
display: block;
height: 36px;
}
div#footer a span
{
display: none;
}
I have been awake 12 hours looking though google and trying to make them down under each other with no luck.

Answer 1

Okay Have looked at your code using firebug.
Why are you inserting more than one
<div class="col1">
...
</div>
You should just place all boxes in the same col1. You do not need two of these.
Basically, do not use two versions of col1 but place all boxes in the same col1, one below each other.
<div class="col1">
<div class="box" id="news" style="position: relative; "></div>
<div class="box" id="events" style="position: relative; "/> </div>
<div class="box" id="news" style="position: relative; "></div>
<div class="box" id="events" style="position: relative; "/> </div>
</div>
If you need to access each box directly then separate them by using different ids, id="news1", id="news2" ...
---EDIT---
Well I have tried it and look:
HTML for one of your col1 (same for both sides).
<div class="col1">
<div class="box" id="news">
<h1 id="news_handle">Home</h1>
<ul>
</ul>
<div class="bar">
<span>
<span></span></span></div>
</div>
<div style="height:20px;"> </div>
<div class="box" id="sponsors">
<h1 id="news_handle">Home</h1>
<ul>
<li>Login</li>
<li>Register</li>
</ul>
<div class="bar"> <span> <span></span></span></div>
</div>
<div class="box" id="affiliates"></div>
<div class="box" id="items"></div>
</div>
I have not changed your CSS, that is what is live

Answer 2

i would suggest removing the
float:left;
from columns... and add:
display:block;

Answer 3

Here you go : http://jsfiddle.net/d47Vs/

Answer 4

I would suggest to put both columns into a div:
<div class="sidebar">
<div id="col1"></div>
<div id="col2"></div>
</div>
Now float: left; for both center box and left sidebar. In order to have col1 and col2 underneath each other use as Philip said display: block;
Edit:
As you already have the first column on the left side if you want the second column on the right side of the box to the left side under the first column then just add the it like following:
<div id="col1">
First column content
<div id="col1>
Second column content
</div>
</div>
<div id="col2"></div>
Link to the html file with css