Adding specific pixel positioning to floats in HTML

When uploading anything that “floats” on my website, I found myself having difficulty getting everything to stay where I wanted. Every time I had everything positioned just right, I found that I needed to move one thing and it messed up the entire layout of my page. Fortunately, I discovered that I could specify exactly where on a page I wanted my objects to go.

First I put each of my separate objects in divs. This isn’t totally necessary but I found it easier to work with divs, especially in Dreamweaver. In the <head> of my page, I created an internal style sheet for each of my divs. I named them (according to the photos), and specified where I wanted them to go. Here’s an example:

div.landscape {position:absolute; width:400px; top:100px;}

Making the position absolute ensures that your images don’t move when you place others before them. The width should be the same as the photo and the top is where you want your image to start on your site. Here’s an example of what my internal style sheet looks like for two images side by side.


After I put both my images in the specified divs, they both start on page at 200px and do not move no matter how much I manipulate the coding or the browser.


As with an HTML code, this can sometimes get tricky but Dreamweaver makes it even easier. Once your images are in divs, it is possible to move the images with your mouse opposed to writing the code. Click on your image (you are actually selecting the entire div here) and a yellow outline will appear. You are then able to grab your div and move it to wherever you want on your page and Dreamweaver will adjust the code for you.

While this grabbing tool is beneficial when you want to move your div to a specific place on your page, but manually entering the code is more helpful when aligning divs.



~ by maireadlynn on October 18, 2011.

%d bloggers like this: