aligning my divs

So it’s nearly the end of the course, and I feel like my website is looking good, however one problem i encountered with my old website was div alignment, so i decided to redo all my pages and make sure all the divs were aligned.

I found this great site that lets you preview what divs will look like according to your coding.

jsFiddle is a great free website which let you test out you div alignent without mucking it up in dreamweaver.

I started with my index page…

which looked like this in my browser…

it’s so much easier to align divs and makes my website run a lot smoother, so i started adding my content in.

It’s really important that i include a wrap div (which is pink in this case, colours are important for the prep stages, in keeping things tidy) a wrap makes sure everything is in place and not over-flowing which is great for me because none of my pages are meant to be scroll pages, they are all static.

once all the colours are gone it looks great and it makes me feel more secure about interface and usability.

Next were my bio & contact pages, they take the same layout so i did them at the same time and changed the content, which was easy because i have already made it all.

This was my basic layout. The main difference between my last layout and this one is using div class instead of div id, it makes aligning divs a lot simpler.

I added my content for the contact page and changed the padding and widths.

Next was adding a footer, which I wanted to stay at the bottom of the page, previously I had done this by coding the div 90% from the top. But after a quick google search I found a great tutorial…

you can see it here

After about an hour of working out where to put the coding, I managed it 🙂 I feel like i’m becoming quite the dab hand at CSS and HTML.

I did this for my Bio page aswel, and then moved onto the gallery pages.

The main page works well, it’s so neat and tidy.

I then worked on a basic page for the galleries

this is where i reached problems, my chosen gallery coding uses div id, and my new layout uses div class

I traipsed around the internet stressed out looking for a new gallery but none fitted my needs 😦

I made a decision to use my new layout system for all the pages except the gallery pages, the coding needed to make the galleries work with my layout is beyond my knowledge and time left, so I am more happy and quite proud of myself for finally making an aligned website.

see it at

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s