Alright so I have this so far but it shows up all weird: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="English" /> <meta name="description" content="#######" /> <meta name="keywords" content="######7 Keywords#######" /> <link rel="shortcut icon" href="http://www.smftutorials.com/favicon.ico" /> <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection,tv" /> <!-- Don't forget to implement these later! <link type="text/css" rel="stylesheet" href="print.css" media="print" /> <link type="text/css" rel="stylesheet" href="handheld.css" media="handheld" /> --> <title>My New Page</title> </head> <body> <div id="pageWrapper"> <div id="h1Container"> H1 Container <!--End h1Container--></div> <div id="contentWrapper"> <div id="content"> This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content This is the middle page content <!--End content--></div> <div id="sideBar1"> This is the left sidebar This is the left sidebar This is the left sidebar This is the left sidebar This is the left sidebar This is the left sidebar This is the left sidebar This is the left sidebar This is the left sidebar This is the left sidebar This is the left sidebar This is the left sidebar This is the left sidebar This is the left sidebar This is the left sidebar This is the left sidebar This is the left sidebar This is the left sidebar This is the left sidebar This is the left sidebar This is the left sidebar This is the left sidebar This is the left sidebar This is the left sidebar This is the left sidebar This is the left sidebar This is the left sidebar This is the left sidebar This is the left sidebar This is the left sidebar This is the left sidebar This is the left sidebar This is the left sidebar This is the left sidebar This is the left sidebar This is the left sidebar This is the left sidebar This is the left sidebar This is the left sidebar This is the left sidebar <!--End sideBar1--></div> <div id="sideBar2"> This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar This is the right sidebar <!--End sideBar2--></div> <div id="footer"> Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer <!-- #footer --></div> <!--End contentWrapper--></div> <!-- #pageWrapper --></div> </body> </html> Code (markup): /* null margins and padding to give good cross-browser baseline */ html,body,address,blockquote,div, form,fieldset,caption, h1,h2,h3,h4,h5,h6, hr,ul,li,ol,ul, table,tr,td,th,p,img { margin:0; padding:0; } img,fieldset { border:none; } hr { display:none; } #pageWrapper { width:100%; } #h1Container { width:100%; background-color:#60d7c4; text-align:center; } #navTop { width:80%; background-color:#07164c; } #navSide { } #contentWrapper { min-width:800px; } #content { min-width:800px; width:76%; margin-left:12%; margin-right:12%; position:relative; /* This fixes the IE7 overflow hidden bug */ background-color:#4337E0; color:#FFF; } #sideBar1 { float:left; width:12%; background-color:#34fc7b; } #sideBar2 { float:right; width:12%; background-color:#f35f4B; } #footer { clear:both; width:100%; background-color:#000; color:#FFF; text-align:center; } Code (markup): This is what I want it to look like: I would literally pay someone $2 via paypal to help me sort this out if you give good detailed explanations so I can learn from this instead of just cut-n-pasting code. This is driving me crazy!
Set a minimum height for your divs via CSS . This is the way i do it . This way you don't need the lorem ipsum text in the HTML . Can i have the 2 USD now ? If you're still confused PM me and I'll send you my Skype .
Im trying to see what is wrong with the layout im using now, I saw your post about the minimum height for the divs in CSS, but it didnt seem to work when i tried it! Whats wrong with the layout above? Trying to learn from things I have coded so I can find my mistakes out (ps I dont have skype)
Skype is free and I can explain the code trough voice chat in less then 5 mins while I can work and talk . To type it out would require 30 mins of more since you're not familiar with liquid layouts and I can't work in that time . Also all floats should go to the left , use only lowercase and there should be no fixed with with values in your CSS code . Get skype and a headset m8 .