I am new to the world of coding as well as CSS. This is my first attempt to put together what I would consider a fully-pledged page less the content. I would appreciate if you could poke holes at it and let me know what I could have done better as well as what I should consider doing in the future. NOTEThe file does not have an external CSS as yet as I am testing the style with an internal stylesheeting prior to moving it across to an external file.The file also have commented out CSS i.e /** **/ where it gives you an idea of what I attempted to achieve using position as opposed to float. I am still unclear on as when to use either. I would appreciate any input. The page has been designed on a larger screen so will not adapt to a smaller screen. That is my next challenge to try and adapt it to a smaller screen.CODE<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd><html xmlns=http://www.w3.org/1999/xhtml><head>    <meta http-equiv=Content-Type content=text/html; charset=UTF-8 />    <meta http-equiv=Content-Language content=en-us />    <meta name=keywords content= />    <meta name=description content= />    <meta name=author content=  />    <title>Example</title>    <base href= />    <link rel=stylesheet type=text/css href= />    <style type=text/css>        * {            margin: 0;            padding: 0;        }        html, body {            height: 100%;        }        #wrapper {            min-height: 100%;        }        #header {            background-image: url('images/bg-inner-page.gif');            height: 200px;        }        #logo {            float: left;            margin-top:  50px;            margin-left: 100px;        }        #topnav {            float: right;            margin-top: 50px;            margin-right: 1250px;        }        #topnav ul {            word-spacing: 10px;        }        #topnav ul li {            list-style-type: none;            display: inline;        }        #columns {            width: 400px;            float: left;            margin-top: 20px;            margin-left: 200px;        }        #col1 {            float: left;            margin-right: 10px;            width: 100px;            border: 1px solid #ffffff;            border-radius: 5px;            height: 80px;        }        #col2 {            float: left;            margin-right: 10px;            width: 100px;            border: 1px solid #ffffff;            border-radius: 5px;            height: 80px;        }        #col3 {            float: left;            width: 100px;            border: 1px solid #ffffff;            border-radius: 5px;            height: 80px;        }        #content {            float: left;            background-color: orange;            width: 500px;            margin-top: 10px;            margin-left: 500px;            overflow: auto;            padding-bottom: 150px;        }        #footer {            position: relative;            margin-top: -150px;            height: 150px;            background-color: #cccccc;            clear: both;        }        #sidebar {            float: left;            width: 100px;            margin-top: 10px;            background-color: gray;        }        /**        #logo {            width: 20px;            position: relative;            top: 50px;            left: 100px;        }        #topnav {            width: 500px;            position: relative;            top: 14px;            left: 150px;        }        #topnav ul {            word-spacing: 10px;        }        #topnav ul li {            list-style-type: none;            display: inline;        }        **/    </style></head><body>    <div id=wrapper>        <div id=header>            <div id=logo>                logo            </div>            <div id=topnav>                <ul>                    <li>home</li>                    <li>about</li>                    <li>browse</li>                    <li>faq</li>                    <li>contact</li>                </ul>            </div>            <div id=columns>                <div id=col1>col1</div>                <div id=col2>col2</div>                <div id=col3>col3</div>            </div>        </div>        <div id=content>content</div>        <div id=sidebar>sidebar</div>    </div>    <div id=footer>footer</div></body></html>
CSS Page Example Code Review
html;css
The first thing you should think about, is if you really need to use XHTML. XHTML has virtually no advantages and many disadvantages compared with HTML 4.01 Strict (or HTML 5). See for example http://www.webdevout.net/articles/beware-of-xhtml .The basic idea of HTML and CSS is that everything flows and adjusts itself. When doing web design one thing many designers do wrong (in my option at least) is to disregard this flow and to think and design in pixels. This can easily go wrong, because the user can (and should) easily override many things (most importantly font size), which will break rigid pixel-based designs. This happens usually because of fixed heights or badly absolutely positioned elements.In your case this would apply to the header and the columns, which contain text and you gave a fixed pixel height. Try out what happens, if the font size is larger or there is more text in them than you expect.Consider using less generic IDs. Especially column and col1/2/3 don't give any information on what they contain. You can simplify and shorten your CSS by applying more complex selectors to take advantage of the cascading part of CSS. For example, you repeat the same properties for col1/2/3, which could instead be moved to a rule with the selector #columns > div (or #columns div if you have to support IE 6):#columns > div {    float: left;    margin-right: 10px;    width: 100px;    border: 1px solid #ffffff;    border-radius: 5px;    height: 80px;}#col3 {    margin-right: 0;}For adapting to different window sizes, look into CSS 3 Media QueriesFor your commented out part: You are using position: relative wrongly. Have a look at http://www.barelyfitz.com/screencast/html-training/css/positioning/ to see how position: relative works, and what to use it for.You probably were thinking you using position: absolute, but you shouldn't. Layouts with position: absolute can easily break, if you do it wrong. You should consider position: absolute the last resort, if there is no other way to implement a layout. Using float as you are doing is much better as it taking advantage of the flow.