Position two div next to each other inside a parent DIV - html

Question

I have two DIVs inside another two parent DIVs. What I am looking to do is align the "clocks" DIV to the left of the "panel" DIV and the "sd" DIV toward the center of the "panel" DIV.
What is showing up as now:
What I am looking to do:
My HTML looks like:
<div id="weather">
<div id="panel">
<div class="clocks">
</div>
<div id="sd">
<script type="text/javascript" src="http://www.weathers.com"></script>
</div>
</div>
<p class="slide">Weather</p>
</div>
My CSS looks like:
#weather {
margin: 0 auto;
padding: 0;
width: 990px;
font: 75%/120% Arial, Helvetica, sans-serif;
top: 0;
position: absolute;
z-index: 999999999;
left: 0%;
margin-left: 0px;
}
#panel {
background: url('weatherBack.png') no-repeat;
height: 195px;
width: 990px;
display: none;
text-align: center;
margin: 0 auto;
line-height: 195px;
}
#sd {
margin: 0 auto;
padding: 0;
width: 175px;
}
.slide {
margin: 0;
padding: 0;
border-top: solid 4px #422410;
background: url(btn.png) no-repeat center top;
}
.btn-slide {
background: url(white-arrow.gif) no-repeat right -50px;
text-align: center;
width: 144px;
height: 31px;
padding: 10px 10px 0 0;
margin: 0 auto;
display: block;
font: bold 120%/100% Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
}
.active {
background-position: right 12px;
}
.learn {
z-index: 9999999999999;
position: absolute;
top: 85px;
right: 3px;
}
.box-cnt {
padding: 10px;
padding-bottom: 2px;
background-color: #1FAAEB;
zoom: 1;
filter: alpha(opacity=80);
opacity: 0.8;
}
.clocks {
width: 209px;
height: 131px;
position: relative;
top: 0;
left: 151;
background: url('css/images/clockbg.png') no-repeat 0 0;
}

Answer 1

Try the float property with a value of left on your clock and weather panels:
.clocks {
width: 209px;
height: 131px;
position: relative;
float: left;
background: url('css/images/clockbg.png') no-repeat 0 0;
}
#sd {
margin: 0 auto;
padding: 0;
width: 175px;
position: relative;
float: left;
}
Here is a working JSFiddle link: http://jsfiddle.net/cYFfT/
If you want to have more space between them, simply set a left margin on the SD panel,
as in this update: http://jsfiddle.net/cYFfT/1/