Okay I'm redesigning my blog so I created the skin in photoshop and then I'm just pretesting it before I actually go ahead and attach it to WP. However, stuff is already not showing up good? I basically want to DIVs to be floating next to each other: one is text (where the main stuff is) and the other is sidebar. I think the picture will explain my problem. The main content is overlapping my footer. How do I fix this? CSS Code body{background:#2A2B2B;background-image: url(back.jpg);background-repeat: repeat-x;margin:0px; padding: 0px;font-family:'Verdana', Arial;} div.all{margin:0 auto;width:770px;} div.green{width:100%;background:#316300;height:3px;clear:both;} div.content{width:100%;height:auto;background:#fff;clear:both;} div.head{width:100%;height:80px;background:#56AC01;border-bottom:1px solid #fff;} div.footer{color: #fff; width:100%;height:80px;background:#56AC01;border-top:1px solid #fff;text-align:center;font-size: 0.7em;clear:both;} div.text{width: 570px;color:#2A2B2B;font-size:0.9em;float:left;position:absolute;background:#fff;} div.sidebar{width: 200px;float:right;background:#fff;} div.box{} img.logo{border: 0px; padding-left: 20px;} Code (markup): HTML Code <html> <head><title>gazotto.com</title> <link rel=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen> </head> <body> <div class="all"> <div class="head"><img class="logo" src="logo.jpg"></div> <div class="green"></div> <div class="content"> <div class="text"> This is a redesign. Blah Blah BLah!Text and information will be coming here. <br /><br /><br /><br /> </div> <div class="sidebar"> Sidebar </div> </div> <div class="green"></div> <div class="footer"><br /><br />Copyright © gazotto.com 2005-2007.</div> </div> </body> </html> Code (markup):
If you're going to have the content above the sidebar in your HTML source code, you're going to have to use negative margins and a 100% width on your content container, plus positive margins equal to double the value of the negative margins (just remove the - from the negative margins when you copy the values over) on the content's immediate descendents. Then you'll have to float the content and sidebar containers opposite of each other. For a fixed width, things will be a bit different. I don't make fixesd width sites very often (especially with ones that have the content before the sidebar), but try this fluid approach out and see if it helps: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Three Column CSS Layout</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="keywords" content="Keywords go here" /> <meta name="description" content="A description of this page goes here." /> <link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen" /> <style type="text/css" media="screen"> /* Stylesheet written by Dan Schulz on 28 January 2007. Stylesheet last modified by Dan Schulz on 30 May 2007. Stylesheet embedded into the HTML file for educational purposes only. */ * { margin: 0; padding: 0; } html, body { height: 100%; } body { background: #FFF; color: #000; } #container { margin-bottom: -3em; min-height: 100%; } * html #container { height: 100%; /* IE 5.x and 6 don't understand min-height, but instead treat height as min-height */ } html>body #container { height: auto; /* for modern browsers as IE 5 and 6 treats height as min-height anyway */ min-height: 100%; /* squashes an IE 7 bug */ } h1 { background: #FCF; color: inherit; padding: 0.25em 0; } #menu { float: left; list-style: none; position: relative; /* this is needed to set the z-index */ width: 8em; z-index: 1; /* this is needed to fix a depth-sorting error */ } #menu li { float: left; /* IE 5.x bug fix */ width: 8em; /* this is needed since the LI is being floated */ } #menu a { background: #F66; color: #FFF; display: block; height: 1%; /* IE 5.01 bug fix */ text-decoration: none; text-indent: 0.25em; width: 100%; } #menu a:hover { background: #FF5; color: #000; } #content { float: left; margin: 0 -13em 0 -8em; width: 100%; } #content .section { background: #CCF; color: inherit; margin: 0 13em 0 8em; padding: 0 1em; } #content p { text-indent: 1.5em; } #sidebar { background: #FFC; display: inline; /* IE 5 and 6 bug fix */ float: right; padding: 0 1em; /* this is what causes the box model problem in IE 5.x */ width: 11em; } * html #sidebar { /* IE 5.x Box Model Hack */ width:13em; w\idth: 11em; } #sidebar p { padding: 0.25em 0; } #clear-footer { /* needed to make room for the footer */ clear: both; height: 3em; } #footer { background: #6CF; clear: both; color: inherit; height: 3em; } #footer p { padding-top: 1em; text-align: center; } </style> </head> <body> <div id="container"> <h1><span></span>Main Heading</h1> <ul id="menu"> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> </ul> <div id="content"> <div class="section"> <h2>Section Heading</h2> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat. Nulla auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et, cursus ut, lectus. Nulla scelerisque, mi vel commodo consequat, turpis ligula congue ligula, eget pellentesque turpis augue quis diam. Nulla facilisi. Etiam commodo quam in metus. Etiam nec nisi ac nisl molestie fermentum. Donec ligula ipsum, venenatis in, egestas vel, commodo bibendum, est. Donec sit amet justo et leo tincidunt rhoncus. Cras aliquam sapien eget nisl. Maecenas vitae arcu et mi gravida porta. Nullam ultricies tempor magna. Sed vel tellus. Etiam sagittis est sagittis odio. Etiam mollis mi ac lacus. </p> </div> <div class="section"> <h2>Section Heading</h2> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat. Nulla auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et, cursus ut, lectus. Nulla scelerisque, mi vel commodo consequat, turpis ligula congue ligula, eget pellentesque turpis augue quis diam. Nulla facilisi. Etiam commodo quam in metus. Etiam nec nisi ac nisl molestie fermentum. Donec ligula ipsum, venenatis in, egestas vel, commodo bibendum, est. Donec sit amet justo et leo tincidunt rhoncus. Cras aliquam sapien eget nisl. Maecenas vitae arcu et mi gravida porta. Nullam ultricies tempor magna. Sed vel tellus. Etiam sagittis est sagittis odio. Etiam mollis mi ac lacus. </p> </div> </div> <div id="sidebar"> <h2>Sidebar Heading</h2> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat. Nulla auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et, cursus ut, lectus. Nulla scelerisque, mi vel commodo consequat, turpis ligula congue ligula, eget pellentesque turpis augue quis diam. Nulla facilisi. Etiam commodo quam in metus. Etiam nec nisi ac nisl molestie fermentum. Donec ligula ipsum, venenatis in, egestas vel, commodo bibendum, est. Donec sit amet justo et leo tincidunt rhoncus. Cras aliquam sapien eget nisl. Maecenas vitae arcu et mi gravida porta. Nullam ultricies tempor magna. Sed vel tellus. </p> </div> <div id="clear-footer"></div> </div> <div id="footer"> <p> Copyright © 2006-2007, The Monster Under the Bed. All Rights To Scare Unsuspecting Children Reserved. </p> </div> </body> </html> Code (markup):
Just wanted to let you know what the SPAN inside the H1 is for. It's a hook for an image replacement technique I use a lot. http://www.sitepoint.com/article/header-images-css-xhtml