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 <style> #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; } </style> Code (markup): 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 --> Code (markup): Thx in advance for any help..! (I always appreciate a second set of eyes
hi srisen2, 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, srisen2...