Need help with positioning divs
Here is an image of the way it should look like (the ugly factor is intentional 
This is my css
#wrapper { margin:0 auto; width:520px; border:0; padding:0; position:relative; !important; }
.clearfix { display: block; }
#content { width:520px; font-family: 'Century Gothic', Arial, Verdana, Helvetica,sans-serif; font-size: 13px; color: #444444; }
.header { margin: 0 auto; width: 520px; height:222px; background-image: url(http://www.albertawebsitemarketing.com/fb/fb_butterflies/bg-header.jpg); }
.header img { position: relative; width:520px; height:141px; z-index:2; }
.boxes { margin: 0 auto; width: 520px; overflow:auto; margin-top: -110px; background-image: url(http://www.albertawebsitemarketing.com/fb/fb_butterflies/bg.jpg); background-repeat: repeat-y; }
p { margin: 0 auto; width: 230px; font-family:Arial,Helvetica,sans-serif; font-size:100%; line-height:1.7em; color: #444444; }
a img, a:link img, a:visited img, a:hover img { border: none; }
ol{ margin: auto 0; padding: 0 10px 15px 30px; }
#left { float:left; width: 250px; height:243px; background-color: #FEF96B; }
H2 { margin: auto 0; padding-top: 25px; text-align:center; color:#434343; font-size:18px; }
.video { float:left; }
.activate-img { width: 235px; height:160px; padding: 35px 0 0 5px; } #right { float:right; width: 260px; height:243px; overflow:auto; }
.right1 { margin: 0 auto; width: 248px; height:118px; }
.right2 { margin: 0 auto; width: 246px; height:118px; margin-top: -4px; background-color: #FEF96B; }
H1 { color:#434343; font-size:16px; text-align:center; padding-top: 5px; }
#optin { float:left; width: 260px; text-align:center; margin-top: -10px; } fieldset { border:0; height:57px }
#optin .field { height:25px }
#optin .text { width:130px; height: 20px; border:1px solid #706F00; padding:2px 7px 2px 5px }
#optin .emailbox { width: 130px; height: 20px; border:1px solid #706F00; padding:2px 7px 2px 5px }
#optin .submit { margin: 0 auto; }
#optin .submittext { margin: auto 0; text-transform: uppercase; font-size:11px; }
input,select,textarea { font-family:Arial,Helvetica,sans-serif; font-size:13px; vertical-align:middle; color:#5c5c5c; margin:0; padding:0; }
label { line-height:30px; font-family:Arial,Helvetica,sans-serif; font-size:12px; }
.footer { margin: 0 auto; clear:both; width:520px; height:261px; }
.social-buttons { margin: -20px 0 0 0; padding: 0; display: inline; list-style-type: none; list-style-image: none; list-style-position: outside; text-align: center; }
.social-buttons li { height: 40px; margin:-3px 2px 5px 2px; none repeat scroll 0% 0%; list-style-type: none; list-style-image: none; list-style-position: outside; float: left; width: 100px; }
.social-buttons li a { padding: 15px 10px 0 0; display: block; }
.social-buttons li a:hover { color:#c6901e; }
.social-fb { position: absolute; left: 325pt; top: 30pt; z-index: 1; }
.social-tw { position: absolute; left: 365pt; top: 30pt; z-index: 1; }
.social-li { position: absolute; left: 410pt; top: 30pt; z-index: 1; }
.social-yt { position: absolute; left: 450pt; top: 30pt; z-index: 1; }This is my markup
<div id="wrapper">
<div id="content">
<div class="header"><img src="http://tycoontalk.freelancer.com/images/banner.png" alt=" " /></div>
<div class="boxes">
<div id="left">
<div class="video">
<H2>Title Goes Here</H2>
<p>lorem ipsum</p>
<img src="http://tycoontalk.freelancer.com/images/act-img.jpg" alt=" " />
</div> <!-- END video -->
</div> <!-- END left -->
<div id="right">
<div class="right1">
<a href="">
<img src="http://tycoontalk.freelancer.com/images/25off.png" alt=" " /> </a>
</div>
<div class="right2">
<H1>Sign Up!</H1>
<div id="optin"> <!-- optin form -->
<form action="" >
<fieldset>
<div class="field">
<label for="text"></label>
<br>
<input type="text" class="text" value="Name" name="text"/>
</div>
<div class="field">
<label for="text"></label><br><input type="text" class="emailbox" value="Email" name="email"/>
</div>
<br>
</fieldset>
<div class="submit">
<input type="submit" value="Submit" class="submit submittext" />
</div>
</form>
</div>
</div> <!-- END right2 -->
</div> <!-- END right -->
</div> <!-- END boxes -->
<div style="clear: both;"></div>
</div> <!-- END content -->
<div class="footer">
<img src="http://tycoontalk.freelancer.com/images/footer.jpg" alt=" " />
<div class="contact">
<a href="" target="_blank" >
<img src="http://tycoontalk.freelancer.com/images/contactus.jpg" alt=" " /> </a>
</div>
<div class="social">
<a href="#"><img src="http://tycoontalk.freelancer.com/images/ico-fb.png" width="32" height="32" alt=" " style="float:left;width:32px;height:32px;" border="0" /></a>
<a href="#"><img src="http://tycoontalk.freelancer.com/images/ico-li.png" width="32" height="32" alt=" " style="float:left;width:32px;height:32px;" border="0" /></a>
<a href="#"><img src="http://tycoontalk.freelancer.com/images/ico-t.png" width="32" height="32" alt=" " style="float:left;width:32px;height:32px;" border="0" /></a>
<a href="#"><img src="http://tycoontalk.freelancer.com/images/ico-yt.png" width="32" height="32" alt=" " style="float:left;width:32px;height:32px;" border="0" /></a>
</div>
</div> <!-- END Footer -->
</div> <!-- END wrapper -->
Thx in advance for any help..! (I always appreciate a second set of eyes 
.
View full post on Tycoon Talk
divs, help, need, Positioning
RSS Site Feed