i've made a site before, but im trying to improve it by going back to basics. im done with reading up on writing semantic XHTML, so im moving on to CSS -- again. what i'm doing at the moment is learning to implement the different schemes of positioning because i want the order in my markup to be: content, secondary menu, header, then footer. but in the browser window, of course i want header on the top, secondary menu and content below the header with secondary menu beside the content on the left, footer at the bottom. but try as i might, after reading up, searching the net etc, then applying what i've read to my code, i just cant seem to get it right. even the basic stuff like float: left, isnt working. i didn't have this problem with my other website. why now? anyway heres the code (all the colors, borders, padding etc are there just so i can see where things go wrong if they do and if everything is positioning as i want it. im relearning all of this, please dont laugh ) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html> <head> <title>Townhouses for sale in Pampanga, Philippines! - Tagle Homes</title> <meta http-equiv="Content-Language" content="en" /> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /> <link rel="stylesheet" type="text/css" href="try.css" /> </head> <body> <div id="wrapper"> <div id="wrapper2"> <div id="body"> <div id="mainContent"> <h1>Heading 1</h1> <p>content content content content content content content content content content content content content content content content content content content content content content </p> <p>content content content content content content content content content content content content content content content content content content content content content content </p> <p>content content content content content content content content content content content content content content content content content content content content content content </p> </div> <div id="sidebar"> <ul> <li><a href=#>Link</a></li> <li><a href=#>Link</a></li> <li><a href=#>Link</a></li> <li><a href=#>Link</a></li> </ul> </div> </div> <div id="header"> <ul> <li><a href=#>Link</a></li> <li><a href=#>Link</a></li> <li><a href=#>Link</a></li> <li><a href=#>Link</a></li> </ul> </div> <div id="footer"> <p>content content content content content content content content content content content content content content content content content content content content content content </p> </div> </div> </div> </body> </html> Code (markup): body { margin: 0 auto; width: 790px; } #wrapper{ width: 790px; margin: 0; padding: 0; background-color: black; } #wrapper2 { margin: 15px; padding: 0; background-color: red; } #header { border: 5px double pink; margin: 0; padding: 5px; background-color: yellow; } #body { margin:0; padding:0; background-color: yellow; border: 5px double pink; } #sidebar { width: 150px; height: auto; border: 2px solid yellow; margin: 0px 10px 0px 0px; padding: 4px; background-color: green; } #mainContent { margin: 0; padding: 4px; border: 2px solid yellow; background-color: green; } #footer { border: 5px double pink; margin: 0; padding: 10px; background-color: yellow; } /*========= Footer ===========*/ /* Text --------*/ #footer p { font-size: .7em; background-color:inherit; font-weight:bold; text-align:center; } Code (markup): how do i use css to position the divs like this? thank you in advance for any responses! i'd really appreciate any help here...
thanks! but im not looking a for a liquid layout... its a small site. and id like the sections in a different order, content first, then use css to position them as shown in the link above. just cant seem to get it to work for me...
well the obvious answer is to use absolute positioning, how to exactly do it is different for different sites Try having a look at my cocktail recipes website, it has content first, then menus then header+footer!