For some reason, I have a mental block about positioning elements in css and knowing when to use… relative/absolute, blocks, overflow, floats, etc. If someone is up to the challenge, could you set me straight on where I’m going wrong with my divs? I can’t seem to line up the center box content or get the social icons positioned on top of the footer.

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="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="images/act-img.jpg" alt=" " />
                </div> <!-- END video -->
              </div> <!-- END left -->
              
              <div id="right">
                 <div class="right1">
                    <a href="">
                    <img src="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="images/footer.jpg" alt=" " />
   
              <div class="contact"> 
                          <a href="" target="_blank" >
                          <img src="images/contactus.jpg" alt=" " /> </a>
              </div>
  <div class="social"> 
                 <a href="#"><img src="images/ico-fb.png" width="32" height="32" alt=" " style="float:left;width:32px;height:32px;" border="0" /></a>
                 <a href="#"><img src="images/ico-li.png" width="32" height="32" alt=" " style="float:left;width:32px;height:32px;" border="0" /></a>
                 <a href="#"><img src="images/ico-t.png" width="32" height="32" alt=" " style="float:left;width:32px;height:32px;" border="0" /></a>
                 <a href="#"><img src="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 :)


.

What exactly is not going right for you? Is there a link we can see this?

There are a few things I would mention:

1. I would not set an explicit width generally on "p" as you are doing. That will affect the whole site. Instead, target that more directly such as #left p { }.

2. If this is all of your css, there is no reset in place. Not that you have to use one, but your #left and #right divs could be inheriting margin or padding in differently across browsers, etc.

3. The footer buttons do not need absolute positioning. They can be floated with some margins set.

4. Where you have set heights is also not always needed. You are forcing a design that cannot ever grow with content in the future. Yes, if there is a background image, sometimes that is unavoidable, but where there is not, I would just set to overflow:hidden (or other clearing methods) to handle the floats and you should be fine.

5. Depending on your doctype, there are some errors with deprecated tags, etc. (target="_blank", <br> is <br />, etc.) Use firebug to help find these as you develop.

Randy,

thx for taking the time to look at this!

1) I'm not usually consistent with how i define my text but good to know that I should get in the habit of defining them in specific sections.

2) The reset was an oversight :|

4) Turns out i was using heights WAY too often and removing them (and re-aligning the divs) cleared up a lot of my problem.

5) I haven't committed <br/> to memory yet and habitually interchange these. Also, i like to use "target=_blank" because in some cases, i want people to open a link in a new tab. As far as i know, i don't think there is a replacement for this??

3) Re: footer...
I have coded it previously how to place icons over top of an image but that file happens to be on a backup disc that my temp computer can't read and I just don't remember what i did. Yes, i listed them, but i don't remember the properties... should i use z-index here?

6) New problem...
Although the middle boxes are properly aligned now, my header doesn't want to display its full length. (I'm still working on this at time of posting)

[ link removed ]

Would love some additional suggestions as time permits....
thx in advance :)

.

i thought i was making progress until i realized that i've done something to prevent the header from displaying properly

[ link removed ]

After getting my divs positioned properly, they don't relate to the header and now i can't see how to move the middle content up (OVER the header bg image and UNDER the header banner) to sit in the right place... (I think the link can explain better than i can)

thx in advance for your help....
(I obviously need to read more!)

*wow*.... after walking around a bit and coming back to it, i noticed that all i had to do was set "height: auto" to my header div and define the actual image (originally defined the image in the header div). What a shmo :|

thanks VERY MUCH for your time, folks