Hi, it’s been a while since I last posted but now that I’m sitting at home unable to work for a while, I’ve caught the coding bug again - there’s something magical about typing code into the editor and watching it spring into life in the preview pane, just how I envisaged it would look. Or not. Quite often not, now that I’m experimenting with CSS.

My current website brings in work and even occasional compliments for the content, so I’ve let it be. But now I want to ditch the table layout & obsolete markup and convert it to 100% CSS. I discovered how to centre a div using margin:0 auto and I’m getting better at positioning, but I think I’ll keep the site’s 3-column layout and overall look until I’m right on top of CSS.

To see if I’m getting the hang of it I designed a temporary page http://www.drivingnt.com/temp/compare.html (for users of a UK driving instructor forum to view), the simple layout makes it look like tables were used but it’s my first attempt at designing without tables - and it validates as HTML5 (the first time that's ever happened for me ).

I used the display:table and display:table-cell properties to get side-by-side divs to adopt the same height, is this a good way of doing it?

I took a quick look at your site. The first thing I noticed is that it is not responsive. Yes, I know that isn't what you asked about, but it is still an extremely important factor, AND it relates to your question. In my experience, coding responsively affects everything else about the site. It could be that when you get to the point in your CSS knowledge that you want to make your site responsive, you'll find that responsive coding adds a whole new layer of complexity and that you may end up having to recode significant portions of your site (if not everything).


As a fellow coder who loves coding, a big part of the enjoyment is the sense of discovery and putting the knowledge to use so that, as you said, "there’s something magical about typing code into the editor and watching it spring into life." The challenge is how quickly can you come up to speed with CSS. CSS has gone through many changes, and I'm sure that new changes will continue to happen. I've been using it for quite awhile, and I'm still learning new stuff all the time. It can be a little daunting to start from the beginning as you are.

I have a suggestion about how you can jump your coding up several levels very quickly.

Responsive Layout Maker (RLM) will let you create what you are trying to do, and it will do it with CSS, and it still allows you to code. If you were to use RLM, here is what you would do.

1. Use RLM to create the wireframe layout for your site including the responsive programming
2. Export
3. Open the pages in HTML Editor and do the additional coding and customization work

Because RLM creates the CSS for you:
-- you can look at the exported code and learn the CSS much more quickly
-- you will learn about features of CSS that you didn't know you wanted until you saw them

In addition, it allows you create your site more quickly, and, most importantly, you can learn while doing. Instead of having to search to figure out how to do what you want to accomplish, RLM will do it so that you can see how to do it.

At $129 (the current price), RLM is less than many HTML/CSS classes, and you can create a productive web site while learning what you want to learn.

(One last thing. I don't work for Coffeecup. I'm just another coder like you. My recommendation is based on my own experience.)

Brian, ALL advice is welcome, and your reply is very useful – thanks!

I bought Layout Maker a while back thinking "responsive" meant WYSIWYG, it was cheap and it’s CC software so I bought it on a whim, but I was playing around with coding on the HTML Editor so didn’t get around to using it.
My site is years old and most components, even some of the fonts, are fixed pixel-sizes (I guess I didn’t want viewers messing up the layout I worked on so hard).

After your reply I Googled around, and now I know the full importance of having a responsive site, especially as many of my clients are teenagers glued to their phones. I had a look at RLM’s online manual, I haven’t gone beyond the demo on page 1 at this point, but when I used the slider to simulate different screen sizes I was impressed with the intelligent way the components rearranged on the screen.

Some questions though …
There’s a lot packed onto my home page so I assume the layout & content needs to be simplified to prevent endless vertical scrolling on small screens?

Does Layout Maker support a limited-width panel centred on the screen (like my current site) or does the content always use 100% screen width?

I’ve been using Arial/Verdana/sans-serif for most text & headings, and Times New Roman/serif for small text. I read somewhere that Arial was designed for the printed page, is Calibri a good first choice for general text?

Hi Zipper,
Single page websites (which require one long scroll and/or anchor points) have become popular, but I think your page is too long even for that. If you check out some single page sites, they tend to have large visuals, quite a bit of white space and even some horizontally scrolled areas.

For an effective responsive layout, you'll need to rework how all that content is presented.
You could consider putting each old test-new test section on its own page, keep a good introduction and info about the site on the home page and add a footer section to the pages with a text menu and the additional links.
Use a standard menu across the top of each page that switched to a drop-down for small screens. (Menu Builder makes this an easy task).
You could divide your main text into 2 or 3 columns when at full-width –wider screens, things don't have to be 100% – but when you get down to phone sizes, 100% width makes more sense – you want to use all the space you have to make sure it's readable. Go down to 1 column for small screen sizes.

About fonts – Verdana was designed to be easily read, even at small sizes. You can also take advantage of Google's web fonts. Droid Sans is quite popular for body text. Think about using the <h> tags for different sized headlines and sub-heads to organize your content. You could also use a different font for those (a serif like Times or Georgia) and/or a different color as well.
Using icons with your headers can help to define areas and give a bit of visual interest.

One thing to be aware of, on small screens you need more space around your links so people can easily tap them.
Don't forget about touch-screens and phones as you plan your design.

Have a look through these text/content heavy website for some design inspiration:
https://www.google.com/search?q=text+he … d=0CCwQsAQ

Have fun with your new CSS adventure, it really is cool to see all you can make happen with it