Question : CSS problem

I want my Div's top sit underneath one another, with a 1pixel gap in between them.

The second div gets pushed over to the left, though. Any idea how this is solved?

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:



<style>
#evenrow {
	width:575px;
	background-color:#f6f6ec;
	height:55px;
}
#evenrow h1 {
	font-family:Arial, Verdana, Helvetica, sans-serif;
	font-size:18px;
	height:23px;
	line-height:23px;
	padding-left:45px;
	padding-top:5px;
	margin-bottom:5px;
	font-weight: normal;
}
.left-column {
	width:40px;
	height:55px;
	background-color:#4c5566;
	float:left;
}
.right-column {
	width:60px;
	height:55px;
	background-color:#747e8f;
	float:right;
}
.venueinfo a {
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	padding-left:5px;
	margin-bottom:90px;
	font-weight:normal;
	color: #964b14;
	float:left;
}
.venueinfo a:hover {
	text-decoration: underline;
}
.time {
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:normal;
	color: #000000;
	float:right;
	padding-right:10px;
}
.day {
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#ffffff;
	width:40px;
	text-align:center;
	padding-top:2px;
}
.daynum {
	font-family: Arial, Helvetica, sans-serif;
	font-size:20px;
	color:#ffffff;
	font-weight:bold;
	text-align:center;
	width:40px;
}
.month {
	font-family: Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#ffffff;
	text-align:center;
	width:40px;
}
.details {
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#ffffff;
	width:40px;
	text-align:center;
	padding-top:10px;
	padding-left:10px;
}
</style>
</head>
<body>
<div id = "evenrow"> <span class = "left-column">
  <div class = "day">Wed</div>
  <div class = "daynum">07</div>
  <div class = "month">Jul</div>
  </span> <span class = "right-column">
  <div class = "details">View Details</div>
  </span>
  <div>
    <h1>Muay Thai Fight Night</h1>
    <span class = "venueinfo"><a href="#">C3 Athletics - Stamford CT</a><span class = "time">8:00PM</span></span> </div>
</div>


<div id = "evenrow"> <span class = "left-column">
  <div class = "day">Wed</div>
  <div class = "daynum">07</div>
  <div class = "month">Jul</div>
  </span> <span class = "right-column">
  <div class = "details">View Details</div>
  </span>
  <div>
    <h1>Muay Thai Fight Night</h1>
    <span class = "venueinfo"><a href="#"> Athletics - Stamford CT</a><span class = "time">8:00PM</span></span> </div>
</div>

Answer : CSS problem

And I left out one super important detail that I am ashamed for overlooking.

You cannot use an ID more than once. Use a class name for any items that appear more than once.

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.evenrow {
        width:575px;
        background-color:#f6f6ec;
		margin-bottom: 1px;
}
.evenrow h2 {
        font-family:Arial, Verdana, Helvetica, sans-serif;
        font-size:18px;
        height:23px;
        line-height:23px;
        padding-left:45px;
        padding-top:5px;
        margin:0 0 5px 0;
        font-weight: normal;
}
.left-column {
        width:40px;
        height:55px;
        background-color:#4c5566;
        float:left;
}
.right-column {
        width:60px;
        height:55px;
        background-color:#747e8f;
        float:right;
}
.venueinfo a {
        text-decoration: none;
        font-family: Arial, Helvetica, sans-serif;
        font-size:12px;
        padding-left:5px;
        font-weight:normal;
        color: #964b14;
        float:left;
}
.venueinfo a:hover {
        text-decoration: underline;
}
.time {
        text-decoration: none;
        font-family: Arial, Helvetica, sans-serif;
        font-size:12px;
        font-weight:normal;
        color: #000000;
        float:right;
        padding-right:10px;
}
.day {
        font-family: Arial, Helvetica, sans-serif;
        font-size:12px;
        color:#ffffff;
        width:40px;
        text-align:center;
        padding-top:2px;
}
.daynum {
        font-family: Arial, Helvetica, sans-serif;
        font-size:20px;
        color:#ffffff;
        font-weight:bold;
        text-align:center;
        width:40px;
}
.month {
        font-family: Arial, Helvetica, sans-serif;
        font-size:10px;
        color:#ffffff;
        text-align:center;
        width:40px;
}
.details {
        font-family: Arial, Helvetica, sans-serif;
        font-size:12px;
        color:#ffffff;
        width:40px;
        text-align:center;
        padding-top:10px;
        padding-left:10px;
}
.clear {
	clear: both;
	height: 0;
	line-height: 0;
	font-size: 1px;
}
</style>
</head>
<body>
<div class = "evenrow">
  <div class = "left-column">
    <div class = "day">Wed</div>
    <div class = "daynum">07</div>
    <div class = "month">Jul</div>
  </div>
  <div class = "right-column">
  	<div class = "details">View Details</div>
  </div>
  <div>
    <h2>Muay Thai Fight Night</h2>
    <span class = "venueinfo"><a href="#">C3 Athletics - Stamford CT</a><span class = "time">8:00PM</span></span>
  </div>
  <div class="clear"></div>
</div>


<div class = "evenrow">
  <div class = "left-column">
    <div class = "day">Wed</div>
    <div class = "daynum">07</div>
    <div class = "month">Jul</div>
  </div> 
  <div class = "right-column">
  	<div class = "details">View Details</div>
  </div>
  <div>
    <h2>Muay Thai Fight Night</h2>
    <span class = "venueinfo"><a href="#"> Athletics - Stamford CT</a><span class = "time">8:00PM</span></span>
  </div>
  <div class="clear"></div>
</div>

</body>
</html>