Web Desginer newbie, advice please???

  Lee-262377 14:17 01 Jul 2008

Hi, I am in the process of writing a website for my business, it will have approx 6 pages, I have written it in html and am using CSS for the design layout.

I have used the div> commands for the header, right and left and the center text and many of the settings for fonts, colours, links etc.

However, when I shrink the window the center text shrinks to fit the page but the header continues on its merry way across the right and left content. Is there a way round this without using frames?

Also when trying to display the site in firefox the alignment is all over the place and the font colours are totally wrong, any advice please?

  Taran 15:44 01 Jul 2008

Welcome to the wonderful world of web design...

CSS is great, as far as it goes, but many of the things that should work in a certain way often don't, and you usually find you have to write browser-specific hacks to get even relatively simple layouts to display properly in IE and Firefox.

Here's a link to a really nice and relatively simple three column layout with header: click here

The centre content area is fluid while the left and right panels are fixed width.

Here is another example that really deserves some attention: click here

I imagine your columns (left/right/main content) are conflicting with how the browser interprets the page.

I get a bit vexed with browsers - the software often seems to let down web code standards that should work but that ends up by being misinterpreted, so we still need browser hacks...

  Taran 15:46 01 Jul 2008

I meant to add that I suggested the above links on the basis that it is often easier to look carefully at something that works as your foundation than scratch your head over the many reasons of why things might not be working.

Without links to your code all we can do is guess as to why things are going awry - based on how many times I've seen CSS break horribly in pretty much every browser on the planet I have a few ideas where you have probably gone wrong though...

  Lee-262377 16:05 01 Jul 2008

Hi, thanks for the reply ill check out those codes snippets that work on both browsers, my site is not yet published so not sure how I could provide a link to my style sheet and the index (which would be enough to show you the problems I am facing) on here.
I could copy and paste the whole lot in here but that seems a bit excessive........

  Forum Editor 23:50 01 Jul 2008

then we'll be able to take a look at your code.

  Lee-262377 17:13 02 Jul 2008

I would but I haven't published it to the net yet and I'm a bit leery of allowing direct access to my pc via a link.

Ill have a scan through my site host and see if I can upload them all and publish it, was hoping to avoid it until all the rough edges have been kinked out. Then I'll try to let you know when its been done.

  gerri-atrick 21:33 02 Jul 2008

Your description is a wee bit vague, what i get from it that you have a header and a 3 column design (left column, Centre column, right column)when you say font shrinks do you mean the column shrinks and the text moves to suit? and for the header it doesnt shrink but stays as it is? if it is that it looks like you have the column width set to % (thats why they shrink) but the header isnt, try setting the header width to %, through experience though that is not a good way to go.
As for the differences in firefox .....welcome to css :) there are loads of differences you need to be aware of between the browsers and some tags dont work well on one when it does on the other,

If you are just making a simple website then my advice would be to stick to tables, they are not as maliable as css but one hell of a lot easier to work with :))

send me your site code as a notepad file along with your style sheet (if seperate) and i will look at for you, as like i said your synopsis was a bit vague and i might have the wrong end of the stick ;)

  Lee-262377 10:12 03 Jul 2008

Hi, sorry I am very much new to website construction (obviously lol).
The basic layout design is a header and a footer with 3 columns inbetween. I was trying to avoid tables due to search and loading issues.
What I want is for the 3 columns to be identical in height so that there are not 3 different sized colunns split across the pages. So if the left column is larger than the middle and right I want them to 'grow to fit' if that makes sense. At the moment my index has a left column that is larger than the center and right but on others it is the other way round.
To the previous poster do you mean to mail the code to you directly? (sorry but i wanted to be sure before i did so as I got my hand smacked for a misunderstanding before :o))

  Taran 11:58 03 Jul 2008

The easiest way to control height is still to use a repeated graphic background image. It's not as elegant as things should be, but full browser support for minimum height CSS attributes is still not a reality, so using a repeating background image tiled vertically to a specified height works even if it does make me wince a little.

3 columns, all fluid can be achieved in a number of ways.

Exmaple CSS:

body {
margin:10px 10px 0px 10px;

#right {

#center {

#left {

#header {

p,h1,pre {
margin:0px 10px 10px 10px;

Example HTML to go with it:

<div id="header">header area - 3 fluid columns</div>

<div id="left">
<h1>left column</h1>
Left - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam...

<div id="center">
<h1>center column</h1>
Centre - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam...

<div id="right">
<h1>right column</h1>
Right - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam...

Note, the above is an incredibly stripped out and relatively simple solution, but it tends to work well across all browsers.

Controlling your column heights could be done by adding:

min-height: 450px;

This would force a 450 pixel minimum height for whatever element of the page you assign that CSS value to, howver, it's not fully suported by all browsers.

You could just as easily assign a background image to each column and make the background image the height you want the column to be, in this case, a 450 pixel high jpg or png file could work - it's not the best solution in terms of coding and good practice, but it works across all browsers where the min-height CSS property does not.

Lots of ways to skin the proverbial cat here, and this is just one possible solution.

Hope it helps in some way.


  themissingelf 12:59 03 Jul 2008

Unless I am misunderstanding... Try clear:both on the header DIV.

  gerri-atrick 22:33 03 Jul 2008

by having columns that widen rather than expand downwords will play havoc in older browsers, there are still people out there who use windows 2000 and explorer 5.5 ( a horrendous combination that an expanding left or right column would completely destroy your page)by wanting your columns to stay the same height but expand outwards doesnt really make sense, with the amount of browsers and operating systems its best to keep it simple.
As for tables ......loading and search issues??
The code from a table is negligible and search is taken care of with keywords etc and most search engines can still spider a site with tables, as with the issues they cause, forget that, these days all search engines will be able to get info from a table and loading time in these days of broadband aint worth bothering about.

CSS isnt the bee all to end all and until all browsers and all operating system treat it the same way then dont put too much credence in it.
Having worked with it for a few years now i just sit down and look to see if i can get a better layout (note layout) and more often that not a tabular layout is better and quicker, css is great for everything else but layouts are still better in some cases tabular than css.

If the site is for your business is it a great idea doing it yourself? a 6 page site done professionally would only be a couple of hundred pounds and a sound investment, to be honest i wouldnt buy anything from an amateurly made site because it would reflect on the company being of the same vein.

Remember internet 7 is still not totally compatible with css, IE 6 is even less, the rest ....forget it :( and for IE 8 the problems are only beginning.

Also .....people can and do expect to scroll down but everybody hates to scroll across ;)

This thread is now locked and can not be replied to.

Elsewhere on IDG sites

Xiaomi Mi Mix 2 review

What went wrong at the Designs of the Year 2017

iPhone X news: Release date, price, new features & specs

Comment regarder des séries et talk-shows américains en France ?