2       Cryptic CSS

On my old site I was working with my DIVs and I came across a slight problem with my coding. My scenario was that I wanted to have the main DIV move as I re-sized the page. I found out that because I was using position: (CSS), I wasn´t going to achieve this.

This is the reason:
The position: in CSS will want one of 5 options.
They are absolute, fixed, inherit, relative or static.
I had been using the absolute one because I wanted it to stay in one place. In this case the middle. I used left: to define how far over I wanted it to go, and positioned it nicely with my 17" 1280×1024 resolution monitor.
Using position:absolute is wrong because people might be working with the site in a small window or their monitor might be a different resolution. For 800×600 viewers the site would be just useless!

Oh dear! That was very foolish I know. I was ending up going to other browsers (Internet Explorer 6, Firefox etc) and checking it and changing it to display correctly. That was pretty bad too as nothing ever was right.

I found a site called Web Generator, which looked pretty cool as it is a Web 2.0 utility.
I made a mock up with that and downloaded the HTML and CSS files for it.

In looking at the CSS, I found out that it wasn´t using ID for DIV layers but a class instead. I also noticed that it wasn´t using the frustrating position:absolute code, but the display:inline and float:left code. This worked for what I wanted to do.

Using a class for a DIV allows multiple DIV´s to be assigned to a single style, if you want it that is.
However ID (the individual DIV name), will only be useful for a single DIV as it works on name.

2 Comments »

  1. Andy Kinsey says:

    Hi GC-UK,
    Nice little site and blog post, we’ve all had this issue at some point as web designers and/or developers!
    you say it was foolish, it wasn’t in all honesty it would have been foolish had you given up and done what i’ve found most people to do …revert back to tables when things get harder. but you didnt you carried on and I admire that!

    anyway nice blog :)

  2. goldy says:

    Thank you for that. Tables are not the way forward.

RSS feed for comments on this post. TrackBack URL

Leave a comment

*