home info scripts guides links contact

Positioning Divs

okay i gots me a layout here that i have to code. the CSS is done (there's a tutorial for that on this site already) and i have the BG made and everything. Now we just have to make it into an ACTUAL, usable layout. now how do we do that?

i cheat. but you can't. lol...i'm going to use paint to do this. yes, you heard me...paint. i have it open in paint now as you can see:

Now with your image open in Paint, take a look at the bottom of the screen. you'll see your color swatches, your status bar, and a section with two numbers separated by a comma in it. i've highlighted its locationi and the actual size of the numbers here:

These numbers are your coordinates. you can find them with your cursor by dragging it anywhere on your image. the first number (X) is left and right, and the second number (Y) is top and bottom.

X: Horizontal
Y: Vertical

so drag your cursor to the top left corner of your first div, where you want your text to start, then look at the coordinates. mine says 10, 512. that means that 10 pixels to the right and 512 pixels down.

Widths and more

then you drag your cursor to the total width of that div you made and open up a new paint window. paste the div inside and press CTRL + E to get the width of this div.

As you can see the width of my div is 180 pixels. i will keep that in mind. write it down somewhere or have it ready in your code.

Now repeat this process for your second div, by putting your cursor on the top left corner of the div, where it begins and getting its coordinates and width.

The coordinates for my second div are: 204, 496. And the width is 385 pixels.

Second Div code

Now we can work this into a code. Here's what a simple div code looks like:


Thought Process

Refer to the key above (X = horizontal, Y= vertical) and put in the appropriate numbers. Like for my first div:

Coordinates: 10, 512
In English: 10 pixels to the right (X), 512 pixels from the top (Y)
X: 10
Y: 512
Left: 10
Top: 512
Width: 180


Yes, that takes...a lot of brain power i know. some thought process. anyways, that translates to this code:


and my second div:

Coordinates: 204, 496
In English: 204 pixels to the right (X), 496 pixels from the top (Y)
X: 204
Y: 496
Left: 204
Top: 496
Width: 385

The code:


You can have as many of these div codes as you want as long as you remember to close your tags by inserting before starting a new one. sometimes you're not right on target, so be sure to check and fix by previewing in your browser.

But as always, Angel hits her target once again perfectly:
copyright 2008 Maggie N