'Div Layout - Also know as a div overlay. When you use css coding to remove and/or hide the default layout elements and start with a clean slate to work with. A blank page for one to build a completely custom and unique page from scratch with complete freedom and control over any elements one decides to incorporate into the layout. Some quick suggestions before you get started... 1) It is recommended that you have a fair understanding of CSS basics before attempting this. 2) Set up a second account on MySpace to serve as your testing account. This will allow you to keep your main account intact. You can work on your div layout on the test account and just copy and paste the finished codes to your main account. 3) Download the Mozilla Firefox browser. There are several downloadable extentions for it that are extreme time savers. We will be using the Web Developer Toolbar in this tutorial. The others are recommended but not necessary. a) Color Picker - Allows you to get the color codes of any color on a web page. b) Measure-It - [url=https://addons.mozilla.org/en-US/firefox/addon/539]CLICK HERE TO DOWNLOAD PAGE[/url] Allows you to measure any element on a web page. c) IE Tab - [url=https://addons.mozilla.org/en-US/firefox/addon/1419]CLICK HERE TO DOWNLOAD PAGE[/url]. Allows you to view a page the way IE would display it with one click. Great for checking cross browser compatability. d) Web Developer Toolbar - [url=http://chrispederick.com/work/web-developer/]CLICK HERE TO DOWNLOAD PAGE[/url]. This will allow you to edit CSS with live changes, great for positioning, testing, and troubleshooting. Hiding the default layout is the first step. If any of the sections on your edit page has anything in them delete all of it now. (About Me, Who I'd Like to Meet, Interests, Music Heroes, etc.) These sections must all be blank before starting. Then place the following bit of code in your 'About Me' section. <">This will remove/hide everything except for the ad and the navagation links that appear right below the ad. The last two lines of code tell the browser how to display the navagation links. If you want to remove these links simply replace the last two lines of code with this - .navbar {display: none;} You should now have a blank white page with only the ad showing, which we want to keep in order to be compliant with the MySpace TOS and the links if you kept them. Now we're going to add some CSS style to the body of our page (our background, font and the scrollbar properties for now. *Scrollbar codes are only supported by IE). The following bit of code will also go within the style tags right below the codes to hide everything, but above the closing style tag. (</style>) I left a gap of 3 spaces for this reason, place the code on the second blank line so that you have a blank line above this bit of code and a blank line below it. We want to keep our codes seperated like this to make it easier to find them when changes are made as well as troubleshooting issues that may arise. <">We can continue to build upon our style sheet by styling the way images and links are displayed, among other things but we'll get back to that later. Now we're going to start adding divs (boxes) to our page. Again within the style tags/sheet with the following... <">Now let's talk about positioning. Since we're using left: 50%; to keep the page compatible with IE and FF browsers we use margin-left: -200px; to control the left to right placement of the div. The very center of the page is 0px, a negative number is that many pixels to the left of the center and a positive number is that many pixels to the right of the center. For the top: 150px; the top of the page is 0px. Since we have to keep the ad in mind we're going to keep the top placement of all of our divs at a 150px minimal which is right below the bottom of the nav links. It's the top left corner of the div that gets placed according to the margin-left: -400px; and the top: 150px;. The height and width of the div along with the border should be self explanatory. The overflow: auto; will create a scroll if the contents of the div exceed the height and width. To turn this off use overflow: hidden;. The z-index: 2; is how we control what divs sit on top or underneath other divs. Think in terms of layers with a stack of papers...the lower the z-index the lower the sheet in the stack. A z-index of 0 is the lowest and a z-index of 9 is the highest. So we basically have ten layers to play with. Now in the Who I'd Like to Meet section we'll place the HTML code that will house the actual content. This is also where you'll place any HTML codes for images and links that you want to appear. Keep in mind that you can 'style' the image and link properties within the style sheet and/or within the HTML markup. <">You should now have a black background and a white box on the page with a red border around it and the text 'hello I am not a rabbit' inside of it. w00t w00t!! You have your first div!! At this point your style sheet should look like this...(default navagation links visible) <">Remember that anything in between the style tags and the style tags themselves are what make up your style sheet. All off the coding in your style sheet is CSS coding. The brackets {} in the coding tells us that it's CSS. The less than and greater than signs < > tells us that it's HTML. CSS codes go within the style tags/sheet in the About Me section and HTML goes in the Who I'd like to Meet section. Time to use that Firefox extension - Web Developer Toolbar. While viewing your profile page open up the CSS Edit. Tools>Web Developer>CSS>Edit CSS or Control+Shift+E for pc, not sure about the shortcut on macs, but I would imagine it's something like Command+Shift+E. Click the 'Embedded Styles' tab. Wow...there's our style sheet, plus some default styles that we can ignore. Let's just focus on our code. Any changes we make to our codes here will change on the screen right then and there. Change the 'top:150px;' to 175px and the div gets moved down 25px. Change the margin-left, height, and width to resize and position the div to what suits you. We'll be adding more divs that will be layered on top of this one so keep in mind that this is our main div and everything will be placed on top of it. If you want a div to be centered make sure the 'margin-left' is half the width of the div and with a negative value added. For example - .div1 {width:800px; margin-left:-400;}, or - .div1 {width:700px; margin-left:-350;}, or - .div1 {width:650px; margin-left:-325;}. Now copy that changed code and paste it over the div code in your style sheet. This extension also comes in very handy when troubleshooting code issues. Use the IE tab extension and/or IE itself to make sure your layout looks the same in both browsers. Click Here to learn about browser differences and what you can do to correct them. Adding more divs is as easy as copying and pasting the div codes and making a few changes to them such as the name, height and width, positioning, z-index, etc. *Note - You can give the div class whatever name you want - home, main, pics, aboutme, links, contact, music, movies, details, blogs, etc. It's a good idea to give them a name that will help you remember what that particuliar div is for. If you want to rename div1 and start naming the divs you add from here on out now would be a good time to do so. For example - <"><">